最近想做一個上傳的總結,把自己用過的上傳插件都寫一寫,哪天用到的時候就不用再一次的翻閱資料,現在頁面上用到的上傳插件,原理上都差不多,那我也就不再廢話了,下面我主要記錄一下幾個比較常用的,由簡到繁,這里我只寫代碼,其它的就不在啰嗦了:
- jquery.upload.js
- ajaxupload.js
- uploadify
- SWFUpload
jquery.upload.js
這里只寫主要的,至於js的引用我就不用說了是吧,自己添加上就行,我就不寫了。
前台html代碼:

1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title></title> 5 <script> 6 /*文件上傳*/ 7 function upload() { 8 $.upload({ // 上傳方法 9 url: '/System/Upload', // 上傳地址 10 fileName: 'uploadfile', // 文件域名字 11 params: { name: 'pxblog' }, // 其他表單數據 12 dataType: 'json', // 上傳完成后, 返回json, text 13 onSend: function () { // 上傳之前回調,return true表示可繼續上傳 14 return true; 15 }, 16 onSubmit: function () { 17 }, 18 onComplate: function (data) { // 上傳之后回調 19 if (data.msg) { 20 21 } else { 22 alert("上傳圖片出錯!"); 23 } 24 } 25 }) 26 } 27 </script> 28 </head> 29 <body> 30 <div> 31 <input type="button" onclick="upload()" value="點擊上傳" /> 32 </div> 33 </body> 34 </html>
后台接收文件的代碼,這里用的MVC

1 public ActionResult Upload(HttpPostedFileBase FileData) 2 { 3 // 如果沒有上傳文件 4 if (FileData == null || string.IsNullOrEmpty(FileData.FileName) || FileData.ContentLength == 0) 5 { 6 return this.HttpNotFound(); 7 } 8 string filename = Path.GetFileName(FileData.FileName); //獲得文件名 9 string extension = Path.GetExtension(FileData.FileName);//獲得文件擴展名 10 string phyPath = Request.MapPath("/Upload/"); 11 if (!Directory.Exists(phyPath)) 12 { 13 Directory.CreateDirectory(phyPath); 14 } 15 decimal newid = Math.Abs(Guid.NewGuid().GetHashCode()); 16 string filepath = phyPath + newid + extension; 17 FileData.SaveAs(filepath); 18 return Content(newid + extension); 19 }
缺點:
這種方式,有個缺點,而且還是在IE上,想想就郁悶,很多亂七八糟的問題都出現在IE上,微軟咋就不能好好整整IE啊。
如果咱們返回方式選擇json的時候,IE有的版本會彈框提示下載,哎,遇到這種問題,也真是夠倒霉的,沒辦法,自求多福吧