ajaxfileupload插件可以以异步方式上传文件（其实现：iframe），不像传统那样需要刷新，下面就介绍下其使用
1、HTML部分（先引入jquery）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无刷新单文件上传</title> 6 <script src="jquery-2.2.4.min.js"></script> 7 <script src="ajaxfileupload.js"></script> 8 </head> 9 <body> 10 <p style="display:none"><input type="file" id="file1" name="file" /></p> 11 <input type="button" value="上传" /> 12 13 <script type="text/javascript"> 14 $(function () { 15 $(":button").click(function () { 16 $("#file1").click(); 17 }) 18 }) 19 $(document).on("change", "#file1", function () { 20 $.ajaxFileUpload({ 21 url: '/upload.ashx', //用于文件上传的服务器端请求地址 22 secureuri: false, //一般设置为false 23 fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" /> 24 dataType: 'json', //返回值类型 一般设置为json 25 success: function (data, status) //服务器成功响应处理函数 26 { 27 if (typeof (data.error) != 'undefined') { 28 if (data.error != '') { 29 alert(data.error); 30 } else { 31 alert(data.msg); 32 } 33 } 34 }, 35 error: function (data, status, e)//服务器响应失败处理函数 36 { 37 alert(e); 38 } 39 }) 40 }); 41 </script> 42 </body> 43 </html>
2、后台代码（使用的一般处理程序[ashx]）：
1 public class upload : IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 HttpFileCollection files = context.Request.Files; 6 string msg = string.Empty; 7 string error = string.Empty; 8 string imgurl; 9 if (files.Count > 0) 10 { 11 files[0].SaveAs(context.Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName)); 12 msg = " 成功! 文件大小为:" + files[0].ContentLength; 13 imgurl = "/" + files[0].FileName; 14 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}"; 15 context.Response.Write(res); 16 context.Response.End(); 17 } 18 } 19 20 public bool IsReusable 21 { 22 get 23 { 24 return false; 25 } 26 } 27 }
注意：IE低版本可能会不兼容（上传文件框被隐藏，而是通过点击按钮去模拟触发文件框点击事件）
参考：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html