標籤：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做後台各寫了一個案例
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
