jQuery.uploadify文件上傳組件實例講解

一、jquery.uploadify簡介

在ASP.NET中上傳的控件有不少，好比.NET自帶的FileUpload，以及SWFUpload，Uploadify等等，尤爲後面兩個控件的用戶體驗比較好，無刷新，帶上傳進度等等。在最近的短信平臺開發中，使用Uploadify進行文件上傳。

Uploadify官網地址是：http://www.uploadify.com/ 可知足項目開發需求。

下載地址：http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 版本信息以下：

解壓以後，目錄結構以下（不在詳細解釋）：

二、使用流程

下載的程序是PHP示例，因爲項目使用的是asp.net mvc，使用uploadify可分如下步驟：

•（1）加入uploadify js類庫（把uploadify相關js類庫引用到項目的相關位置，好比放到scripts目錄）

•（2）對uploadify二次進行封裝，知足項目調用

•（3）編寫文件上傳處理方法

•（4）頁面引用相關類庫並編寫上傳腳本

2.1 對uploadify二次進行封裝

針對uploadify調用進行js類庫封裝，知足項目使用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

//轉換成key=value&key=value格式 tx.toParam = function (dto) { return jQuery.param(dto); } //設置上傳文件 tx.uploadify = function (divId, options, action) { if (options == undefined && action == undefined) { $( '#' + divId).uploadify( "upload" ); return ; } if (options == undefined) { abp.message.warn( "請輸入參數配置" ); return ; } var fileexts = options.fileexts; if (fileexts == undefined || fileexts.length <= 0) { abp.message.warn( "要選擇文件的擴展名不能爲空" ); return ; } $( '#' + divId).uploadify({ uploader: '/files/upload?r=' + Math.random() + "&fileexts=" + encodeURIComponent(fileexts) + "&" + (options !== undefined ? tx.toParam(options.params) : "" ), // 服務器端處理地址 swf: '/Scripts/uploadify/uploadify.swf' , // 上傳使用的 Flash width: 60, // 按鈕的寬度 height: 23, // 按鈕的高度 buttonText: "選擇文件" , // 按鈕上的文字 buttonCursor: 'hand' , // 按鈕的鼠標圖標 fileObjName: 'Filedata' , // 上傳參數名稱 fileTypeExts: fileexts, // 擴展名 fileTypeDesc: "請選擇文件" , // 文件說明 fileDesc: '不超過200M的' , sizeLimit: 204800000, //容許上傳的文件大小(kb) 此爲2M auto: false , // 選擇以後，自動開始上傳 multi: true , // 是否支持同時上傳多個文件 queueSizeLimit: 1, // 容許多文件上傳的時候，同時上傳文件的個數 onSelectOnce: function (event, data) { //在單文件或多文件上傳時，選擇文件時觸發 //event 事件對象(the event object) //data 選擇的操做信息 //data.filesSelected 選擇文件操做中選中的文件數量 }, onUploadStart: function (file) { //file:將要上載的文件對象 ShowBusy(); }, onUploadComplete: function (file) { //file:上傳或返回一個錯誤的文件對象。 }, onUploadSuccess: function (file, data, response) { //file:成功上傳的文件對象 //data:服務器端腳本返回的數據（任何由文件響應的任何東西） //response:服務器返回的響應是否真的成功或錯誤，若是沒有響應。若是返回false，這successtimeout期權到期後的反應真是假設。 if (action !== undefined) { action(JSON.parse(data)); } ClearBusy(); }, onUploadError: function (file, errorCode, errorMsg, errorString) { //file:上傳的文件對象 //errorCode:返回的錯誤代碼 //errorMsg:返回的錯誤消息 //errorString:包含錯誤的全部細節的可讀的錯誤信息 if (action !== undefined) { if (action !== undefined) { action({ result: errorCode, message: errorMsg, filename: "" , fileext: "" }); } } ClearBusy(); } }); }

2.2 文件上傳處理

使用MVC特性，要登陸以後才能進行文件上傳：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

using System; using System.IO; using System.Security.Principal; using System.Web; using System.Web.Mvc; using System.Web.Security; namespace TxSms.Web.Controllers { /// <summary> /// 文件上傳管理 /// </summary> [Authorize] public class FilesController : TxSmsControllerBase { private static string jsonResult = "{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}" ; /// <summary> /// 文件上傳頁面 /// </summary> /// <returns></returns> [Authorize] public ActionResult Index() { return View(); } /// <summary> /// 上傳文件 /// </summary> /// <param name="filedata"></param> /// <returns></returns> [Authorize] public ActionResult Upload(HttpPostedFileBase filedata) { // 若是沒有上傳文件 if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0) { return new JsonStringResult(string.Format(jsonResult, "{" , -1, "" , "" , "" , "}" )); } string parmPath = Request.QueryString[ "path" ]; string parmGetzipfile = Request.QueryString[ "getzipfile" ]; if (parmGetzipfile.IsNullOrEmpty()) { parmGetzipfile = "0" ; } // 保存到 ~/uploads 文件夾中，名稱不變 string time = DateTime.Now.ToString( "yyyyMMddHHmmssfff" ); string fileext = Path.GetExtension(filedata.FileName); string filename = time + fileext; string virtualPath = parmPath.IsNullOrEmpty() ? $ "~/uploads/" : $ "~/uploads/{parmPath}/" ; string actualPath = Server.MapPath(virtualPath); if (!Directory.Exists(actualPath)) { Directory.CreateDirectory(Server.MapPath(virtualPath)); } // 文件系統不能使用虛擬路徑 var destFile = virtualPath + filename; string path = Server.MapPath(destFile); filedata.SaveAs(path); bool iszip = fileext != null && (fileext.Equals( ".zip" , StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals( "1" )); if (iszip) { var virtualPathZip = virtualPath + time + "/" ; string actualPathZip = Server.MapPath(virtualPathZip); if (!Directory.Exists(actualPathZip)) { Directory.CreateDirectory(actualPathZip); } destFile = fileext = "" ; //第一步驟，解壓 TxSmsZipHelper.UnZipFile(path, actualPathZip); //第二步驟，獲取excel文件，若是沒有獲取到，則拋出異常 //得到目錄信息 var dir = new DirectoryInfo(actualPathZip); //得到目錄文件列表 var files = dir.GetFiles(); foreach (FileInfo fileName in files) { //var ext = Path.GetExtension(fileName.Name).ToLower(); //if (ext == ".xls" || ext == ".xlsx") //{ // destFile = Path.Combine(fileName.DirectoryName, fileName.Name); // break; //} destFile = virtualPathZip + fileName.Name; fileext = Path.GetExtension(fileName.Name); break ; } } return new JsonStringResult(string.Format(jsonResult, "{" , 0, "上傳成功" , destFile, fileext.ToLower(), "}" )); } public class JsonStringResult : ContentResult { public JsonStringResult(string json) { Content = json; ContentType = "application/json" ; } } } }

文件上傳路徑：/files/upload

2.3 頁面調用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<!DOCTYPE html> <html> <head> <meta name= "viewport" content= "width=device-width" /> <title>Index</title> <link href= "/Content/themes/base/uploadify/uploadify.css" rel= "stylesheet" /> <script src= "/Scripts/jquery-2.1.4.min.js" ></script> <script src= "/Scripts/uploadify/jquery.uploadify.min.js" ></script> <script type= "text/javascript" > $( function () { var ASPSESSID = '3iupfg2udk4m5hyzfj5ydlso' ; var auth = '' ; //初始化 tx.uploadify( 'uploadify' , { //參數配置 fileexts: "*.jpg;*.png;*.zip" , //要選擇文件的擴展名，多個用;分割 //formData: { ASPSESSID: ASPSESSID, AUTHID: auth }, params: { //參數 path: 'files' , //上傳路徑，容許爲空 getzipfile: 1 //解壓zip文件，並獲取文件 0：不解壓獲取，1：解壓獲取 } } , function (data) { //回調函數 //data.result：0 表示成功，其餘表示錯誤 //data.message：信息 //data.filename：文件名稱 //data.fileext：文件擴展 console.log(data.result); console.log(data.message); console.log(data.filename); console.log(data.fileext); }); $( "#btnUpload" ).click( function () { tx.uploadify( 'uploadify' ); //開始上傳 }); }); </script> </head> <body> <div style= "margin: 40px;" > <div id= "uploadify" ></div> <button id= "btnUpload" >開始上傳</button> </div> </body> </html>

容許程序，界面以下：

選擇文件—>開始上傳：

ok，到此已經完成。

三、http 302解決方案

很懷疑二八原則，很快就出現了。同事用firefox進行測試，遇到以下提示：

查找大量資料，發下是Upload方法認證的問題，去掉[Authorize]屬性標籤便可，代碼修改以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

using System; using System.IO; using System.Web; using System.Web.Mvc; namespace TxSms.Web.Controllers { /// <summary> /// 文件上傳管理 /// </summary> //[Authorize] public class FilesController : TxSmsControllerBase { private static string jsonResult = "{0}\"result\":{1},\"message\":\"{2}\",\"filename\":\"{3}\",\"fileext\":\"{4}\"{5}" ; /// <summary> /// 文件上傳頁面 /// </summary> /// <returns></returns> [Authorize] public ActionResult Index() { return View(); } /// <summary> /// 上傳文件 /// </summary> /// <param name="filedata"></param> /// <returns></returns> //[Authorize] public ActionResult Upload(HttpPostedFileBase filedata) { //加入認證信息 if ( this .LoginUser == null ) { return new JsonStringResult(string.Format(jsonResult, "{" , -1, "抱歉，未登陸，不容許上傳" , "" , "" , "}" )); } // 若是沒有上傳文件 if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0) { return new JsonStringResult(string.Format(jsonResult, "{" , -2, "無上傳文件" , "" , "" , "}" )); } string parmPath = Request.QueryString[ "path" ]; string parmGetzipfile = Request.QueryString[ "getzipfile" ]; if (parmGetzipfile.IsNullOrEmpty()) { parmGetzipfile = "0" ; } // 保存到 ~/uploads 文件夾中，名稱不變 string time = DateTime.Now.ToString( "yyyyMMddHHmmssfff" ); string fileext = Path.GetExtension(filedata.FileName); string filename = time + fileext; string virtualPath = parmPath.IsNullOrEmpty() ? $ "~/uploads/" : $ "~/uploads/{parmPath}/" ; string actualPath = Server.MapPath(virtualPath); if (!Directory.Exists(actualPath)) { Directory.CreateDirectory(Server.MapPath(virtualPath)); } // 文件系統不能使用虛擬路徑 var destFile = virtualPath + filename; string path = Server.MapPath(destFile); filedata.SaveAs(path); bool iszip = fileext != null && (fileext.Equals( ".zip" , StringComparison.OrdinalIgnoreCase) && parmGetzipfile.Equals( "1" )); if (iszip) { var virtualPathZip = virtualPath + time + "/" ; string actualPathZip = Server.MapPath(virtualPathZip); if (!Directory.Exists(actualPathZip)) { Directory.CreateDirectory(actualPathZip); } destFile = fileext = "" ; //第一步驟，解壓 TxSmsZipHelper.UnZipFile(path, actualPathZip); //第二步驟，獲取excel文件，若是沒有獲取到，則拋出異常 //得到目錄信息 var dir = new DirectoryInfo(actualPathZip); //得到目錄文件列表 var files = dir.GetFiles(); foreach (FileInfo fileName in files) { //var ext = Path.GetExtension(fileName.Name).ToLower(); //if (ext == ".xls" || ext == ".xlsx") //{ // destFile = Path.Combine(fileName.DirectoryName, fileName.Name); // break; //} destFile = virtualPathZip + fileName.Name; fileext = Path.GetExtension(fileName.Name); break ; } } return new JsonStringResult(string.Format(jsonResult, "{" , 0, "上傳成功" , destFile, fileext.ToLower(), "}" )); } public class JsonStringResult : ContentResult { public JsonStringResult(string json) { Content = json; ContentType = "application/json" ; } } } }

再次用firefox測試以下：

四、注意事項

一、封裝的js類庫適合單文件上傳

二、upload裏面的登陸認證是經過判斷當前帳號信息是否爲null

三、本項目使用的abp框架，有興趣的能夠去了解下：http://www.aspnetboilerplate.com/

以上所述是小編給你們介紹的jQuery.uploadify文件上傳組件實例講解，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。在此也很是感謝你們對腳本之家網站的支持！