标签：write ons 上传 request .com div 插件 pat gif
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做后台各写了一个案例
标签：write ons 上传 request .com div 插件 pat gif
原文地址：http://www.cnblogs.com/BensonHai/p/6862966.html
