ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例
Posted Bensonhai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例相关的知识，希望对你有一定的参考价值。
HTML代码 和js 代码
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/js/jquery-1.8.3.min.js"></script> <script src="~/js/ajaxfileupload.js"></script> <script type="text/javascript"> $(function () { $("#butLoad").click(function () { $("#img1").attr("src", "../images/timg.gif"); //调用action $.ajaxFileUpload({ url: "../Upload/UpLoad", secureuri: false, //一般设置为false fileElementId: \'Img\', //文件上传空间的id属性 <input type="file" id="Img" name="file" /> dataType: \'json\', //返回值类型 success: function (data, status) //服务器成功响应处理函数 { $("#img1").attr("src", data.imgurl); if (typeof (data.error) != \'undefined\') { if (data.error != \'\') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } }); }); $("#butLoadAsp").click(function () { $("#imgAsp").attr("src", "../images/timg.gif"); //调用aspx $.ajaxFileUpload({ url: "../Ajax/UpLoad.aspx?__Action=UpLoadImg", secureuri: false, //一般设置为false fileElementId: \'ImgAsp\', //文件上传空间的id属性 <input type="file" id="Img" name="file" /> dataType: \'json\', //返回值类型 success: function (data, status) //服务器成功响应处理函数 { $("#imgAsp").attr("src", data.imgurl); if (typeof (data.error) != \'undefined\') { if (data.error != \'\') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } }); }); }); function ChImages(obj) { $("#img1").attr("src", obj.value) } </script> </head> <body> <div> <h3>mvc-ajax</h3> <input type="file" id="Img" name="file" onchange="ChImages(this)" /> @*注意：name一定要写*@ <button id="butLoad">上传</button> <img src="" id="img1" alt="请选择图片" width="200" /> </div> <div> <h3>asp.net-ajax</h3> <input type="file" id="ImgAsp" name="file" /> @*注意：name一定要写*@ <button id="butLoadAsp">上传</button> <img src="" id="imgAsp" alt="请选择图片" width="200" /> </div> </body> </html>
mvc 控制中代码
[HttpPost]//过滤 public JsonResult UpLoad() { HttpFileCollectionBase files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型 object result = new { error="error", msg="上传失败",imgurl= files[0].FileName}; string msg = string.Empty; string error = string.Empty; string imgurl; if (files.Count > 0) { string savePath = Server.MapPath("/") + "UpLoadImg\\\\";//保存文件地址 //string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath); if (!Directory.Exists(savePath)) { Directory.CreateDirectory(savePath); } files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName)); msg = " 成功! 文件大小为:" + files[0].ContentLength; imgurl = "../UpLoadImg/" + files[0].FileName; result =new { error="success", msg= msg, imgurl=imgurl }; } return Json(result, "text/html"); }
aspx.cs 代码
public partial class UpLoad : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string action = Request["__Action"]; if (action==null || action == string.Empty) return; Page p = this; Type pageType = p.GetType(); MethodInfo method = pageType.GetMethod(action); if (method != null) method.Invoke(p, null); } public void UpLoadImg() { HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型 // object result = new { error = "error", msg = "上传失败", imgurl = files[0].FileName }; string result = "{ error:\'error\', msg:\'上传失败\',imgurl:\'" + files[0].FileName + "\'}"; string msg = string.Empty; string error = string.Empty; string imgurl; if (files.Count > 0) { string savePath = Server.MapPath("/") + "UpLoadImg\\\\";//保存文件地址 //string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath); if (!Directory.Exists(savePath)) { Directory.CreateDirectory(savePath); } files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName)); msg = " 成功! 文件大小为:" + files[0].ContentLength; imgurl = "../UpLoadImg/" + files[0].FileName; result = "{ error:\'" + error + "\', msg:\'" + msg + "\',imgurl:\'" + imgurl + "\'}"; } Response.Clear(); Response.Write(result.ToString()); Response.End(); } }
MVC和aspx 有些不同，MVC获取HttpInputFile 用HttpFileCollectionBase 类，aspx获取HttpInputFile 用HttpFileCollection 类
个人学习，请多多指教
代码：http://files.cnblogs.com/files/BensonHai/UploadImage.rar 本人是用VS2015写的
以上是关于ajaxfileupload插件上传图片功能，用MVC和aspx做后台各写了一个案例的主要内容，如果未能解决你的问题，请参考以下文章
jQuery插件ajaxfileupload.js源码与使用
jsp中使用jquery的ajaxfileupload插件怎么实现异步上传