public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Upload() { HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; string imgPath = ""; if (hfc.Count > 0) { imgPath = "/testUpload" + hfc[0].FileName; string PhysicalPath = Server.MapPath(imgPath); hfc[0].SaveAs(PhysicalPath); } return Content(imgPath); } }
前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到<img>的SRC地址
<html> <head> <script src="https://www.jb51.net/jquery-1.7.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":button").click(function () { if ($("#file1").val().length > 0) { ajaxFileUpload(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/Home/Upload', //用于文件上传的服务器端请求地址 secureuri: false, //一般设置为false fileElementId: 'file1', //文件上传空间的id属性 <input type="file" /> dataType: 'HTML', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data); $("#img1").attr("src", data); if (typeof (data.error) != 'undefined') { if (data.error != '') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script> </head> <body> <p><input type="file" /></p> <input type="button" value="上传" /> <p><img alt="上传成功啦" src="" /></p> </body> </html>
最后再来一个上传图片且附带参数的实例：控制器代码：
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Upload() { NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form; HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files; string imgPath = ""; if (hfc.Count > 0) { imgPath = "/testUpload" + hfc[0].FileName; string PhysicalPath = Server.MapPath(imgPath); hfc[0].SaveAs(PhysicalPath); } //注意要写好后面的第二第三个参数 return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet); } }
Index视图代码:
<html> <head> <script src="https://www.jb51.net/jquery-1.7.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":button").click(function () { if ($("#file1").val().length > 0) { ajaxFileUpload(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/Home/Upload', //用于文件上传的服务器端请求地址 type: 'post', data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行 secureuri: false, //一般设置为false fileElementId: 'file1', //文件上传空间的id属性 <input type="file" /> dataType: 'json', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data); $("#img1").attr("src", data.imgPath1); alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name); if (typeof (data.error) != 'undefined') { if (data.error != '') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script> </head> <body> <p><input type="file" /></p> <input type="button" value="上传" /> <p><img alt="上传成功啦" src="" /></p> </body> </html>
此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址
2013年1月28日，今天调试过程中发现一个问题，就是作为文件域(<input type="file">)必须要有name属性，如果没有name属性，上传之后服务器是获取不到图片的。如：正确的写法是<input type="file" />
2013年1月28日，最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError'，这个是google浏览器报的错误，非常经典， 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：dataType参数一定要大写。如：dataType: 'HTML'。
2016-07-28，评论中的一个错误：TypeError: $.ajaxFileUpload is not a function 我们用的不是同一个JS，你下了别的AJAXFileUpload去了。