js+ajax 上传照片（兼容手机端）

最近做的html5手机端有涉及  手机端上传图片

首先页面引用ajaxfileupload.js 

https://download.csdn.net/download/Astpiy/12573379

html页面

<label for="file" style="margin-left:20%;margin-top:5%;"> <img src="Admin/images/r1003.jpg" style="border-radius: 50% !important; width: 100%;"/> </label> <input id="file" type="file" style="display: none" name="file" onchange="img()" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />

这是有用到 label 的新特性 for   是为了设置上传的样式

然后js传值至ajax

//上传图片 function img() { $.ajaxFileUpload({ url: "Admin/ashx/Upload.ashx", secureuri: false, fileElementId: 'file',//上传控件ID dataType: 'json', data: { "action": "SaveImg" }, success: function (data, status) { var Wx = GetWXInf("AddTogetherTour.html"); window.location.href = Wx; }, error: function (data, status, e) { alert(e); } }); }

ajax后端保存图片

using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Web; using System.Web.SessionState;//使用session using System.Configuration; using NLog;//日志 namespace Admin.ashx { /// <summary> /// 的摘要说明 /// </summary> public class Upload: IHttpHandler, IRequiresSessionState //使用session { private static readonly Logger _logger = LogManager.GetCurrentClassLogger();//日志 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request.Params["action"]; switch (action) { case "SaveImg": SaveImg(context); break; } } public void SaveImg(HttpContext context) { try { _logger.Error("======================================================"); context.Response.ContentType = "text/plain"; HttpPostedFile hpf = context.Request.Files["file"];//获取file对象 HttpFileCollection FileCollect = context.Request.Files; _logger.Error("TogetherTour SaveImg Imgcount:" + FileCollect.Count); if (FileCollect.Count > 0) { string filenewName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "_" + System.IO.Path.GetFileName(FileCollect[0].FileName);//前端控制只能选一个 所以直接使用FileCollect[0] _logger.Error("TogetherTour SaveImg filenewName:" + filenewName); string dt = DateTime.Now.ToString("yyyyMMddHHmmss"); string savefilepath = context.Server.MapPath("/UploadImg/") + filenewName; _logger.Error("TogetherTour SaveImg savefilepath:" + savefilepath); FileCollect[0].SaveAs(savefilepath); string imgurl = "../UploadImg/" + filenewName; context.Session["Imgurl"] = imgurl; _logger.Error("TogetherTour SaveImg imgurl:" + imgurl); string str = JsonConvert.SerializeObject(new { code = 0, msg = "图片上传成功！" }); context.Response.Write(str); } else { string str = JsonConvert.SerializeObject(new { code = 1, msg = "未选择图片！" }); context.Response.Write(str); } } catch (Exception ex) { _logger.Error("TogetherTour SaveImg ERROR !"); _logger.Error("ERROR Message : " + ex.Message); _logger.Error("ERROR StackTrace : " + ex.StackTrace); _logger.Error("======================================================"); string str = JsonConvert.SerializeObject(new { code = 2, msg = "图片上传失败" }); context.Response.Write(str); } } }

日志很详细是为了手机端上传时判断出错地方

注意：ajax使用Session  记得using System.Web.SessionState;IRequiresSessionState