jQuery.uploadify文件上傳組件實(shí)例講解
1、jquery.uploadify簡(jiǎn)介
在ASP.NET中上傳的控件有很多,比如.NET自帶的FileUpload,以及SWFUpload,Uploadify等等,尤其后面兩個(gè)控件的用戶(hù)體驗(yàn)比較好,無(wú)刷新,帶上傳進(jìn)度等等。在最近的短信平臺(tái)開(kāi)發(fā)中,使用Uploadify進(jìn)行文件上傳。
Uploadify官網(wǎng)地址是:http://www.uploadify.com/ 可滿(mǎn)足項(xiàng)目開(kāi)發(fā)需求。
下載地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 版本信息如下:
解壓之后,目錄結(jié)構(gòu)如下(不在詳細(xì)解釋?zhuān)?br />
2、使用流程
下載的程序是PHP示例,由于項(xiàng)目使用的是asp.net mvc,使用uploadify可分以下步驟:
•(1)加入uploadify js類(lèi)庫(kù)(把uploadify相關(guān)js類(lèi)庫(kù)引用到項(xiàng)目的相關(guān)位置,比如放到scripts目錄)
•(2)對(duì)uploadify二次進(jìn)行封裝,滿(mǎn)足項(xiàng)目調(diào)用
•(3)編寫(xiě)文件上傳處理方法
•(4)頁(yè)面引用相關(guān)類(lèi)庫(kù)并編寫(xiě)上傳腳本
2.1 對(duì)uploadify二次進(jìn)行封裝
針對(duì)uploadify調(diào)用進(jìn)行js類(lèi)庫(kù)封裝,滿(mǎn)足項(xiàng)目使用:
//轉(zhuǎn)換成key=value&key=value格式 tx.toParam = function (dto) { return jQuery.param(dto); } //設(shè)置上傳文件 tx.uploadify = function (divId, options, action) { if (options == undefined && action == undefined) { $('#' + divId).uploadify("upload"); return; } if (options == undefined) { abp.message.warn("請(qǐng)輸入?yún)?shù)配置"); return; } var fileexts = options.fileexts; if (fileexts == undefined || fileexts.length <= 0) { abp.message.warn("要選擇文件的擴(kuò)展名不能為空"); return; } $('#' + divId).uploadify({ uploader: '/files/upload?r=' + Math.random() + "&fileexts=" + encodeURIComponent(fileexts) + "&" + (options !== undefined ? tx.toParam(options.params) : ""), // 服務(wù)器端處理地址 swf: '/Scripts/uploadify/uploadify.swf', // 上傳使用的 Flash width: 60, // 按鈕的寬度 height: 23, // 按鈕的高度 buttonText: "選擇文件", // 按鈕上的文字 buttonCursor: 'hand', // 按鈕的鼠標(biāo)圖標(biāo) fileObjName: 'Filedata', // 上傳參數(shù)名稱(chēng) fileTypeExts: fileexts, // 擴(kuò)展名 fileTypeDesc: "請(qǐng)選擇文件", // 文件說(shuō)明 fileDesc: '不超過(guò)200M的', sizeLimit: 204800000, //允許上傳的文件大小(kb) 此為2M auto: false, // 選擇之后,自動(dòng)開(kāi)始上傳 multi: true, // 是否支持同時(shí)上傳多個(gè)文件 queueSizeLimit: 1, // 允許多文件上傳的時(shí)候,同時(shí)上傳文件的個(gè)數(shù) onSelectOnce: function (event, data) { //在單文件或多文件上傳時(shí),選擇文件時(shí)觸發(fā) //event 事件對(duì)象(the event object) //data 選擇的操作信息 //data.filesSelected 選擇文件操作中選中的文件數(shù)量 }, onUploadStart: function (file) { //file:將要上載的文件對(duì)象 ShowBusy(); }, onUploadComplete: function (file) { //file:上傳或返回一個(gè)錯(cuò)誤的文件對(duì)象。 }, onUploadSuccess: function (file, data, response) { //file:成功上傳的文件對(duì)象 //data:服務(wù)器端腳本返回的數(shù)據(jù)(任何由文件響應(yīng)的任何東西) //response:服務(wù)器返回的響應(yīng)是否真的成功或錯(cuò)誤,如果沒(méi)有響應(yīng)。如果返回false,這successtimeout期權(quán)到期后的反應(yīng)真是假設(shè)。 if (action !== undefined) { action(JSON.parse(data)); } ClearBusy(); }, onUploadError: function (file, errorCode, errorMsg, errorString) { //file:上傳的文件對(duì)象 //errorCode:返回的錯(cuò)誤代碼 //errorMsg:返回的錯(cuò)誤消息 //errorString:包含錯(cuò)誤的所有細(xì)節(jié)的可讀的錯(cuò)誤信息 if (action !== undefined) { if (action !== undefined) { action({ result: errorCode, message: errorMsg, filename: "", fileext: "" }); } } ClearBusy(); } }); }
2.2 文件上傳處理
使用MVC特性,要登錄之后才能進(jìn)行文件上傳:
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> /// 文件上傳頁(yè)面 /// </summary> /// <returns></returns> [Authorize] public ActionResult Index() { return View(); } /// <summary> /// 上傳文件 /// </summary> /// <param name="filedata"></param> /// <returns></returns> [Authorize] public ActionResult Upload(HttpPostedFileBase filedata) { // 如果沒(méi)有上傳文件 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 文件夾中,名稱(chēng)不變 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)); } // 文件系統(tǒng)不能使用虛擬路徑 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文件,如果沒(méi)有獲取到,則拋出異常 //獲得目錄信息 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 頁(yè)面調(diào)用
<!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' , { //參數(shù)配置 fileexts: "*.jpg;*.png;*.zip", //要選擇文件的擴(kuò)展名,多個(gè)用;分割 //formData: { ASPSESSID: ASPSESSID, AUTHID: auth }, params: { //參數(shù) path: 'files',//上傳路徑,允許為空 getzipfile: 1 //解壓zip文件,并獲取文件 0:不解壓獲取,1:解壓獲取 } } , function (data) { //回調(diào)函數(shù) //data.result:0 表示成功,其他表示錯(cuò)誤 //data.message:信息 //data.filename:文件名稱(chēng) //data.fileext:文件擴(kuò)展 console.log(data.result); console.log(data.message); console.log(data.filename); console.log(data.fileext); }); $("#btnUpload").click(function () { tx.uploadify('uploadify'); //開(kāi)始上傳 }); }); </script> </head> <body> <div style="margin: 40px;"> <div id="uploadify"></div> <button id="btnUpload">開(kāi)始上傳</button> </div> </body> </html>
允許程序,界面如下:
選擇文件—>開(kāi)始上傳:
ok,到此已經(jīng)完成。
3、http 302解決方案
很懷疑二八原則,很快就出現(xiàn)了。同事用firefox進(jìn)行測(cè)試,遇到如下提示:
查找大量資料,發(fā)下是Upload方法認(rèn)證的問(wèn)題,去掉[Authorize]屬性標(biāo)簽即可,代碼修改如下:
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> /// 文件上傳頁(yè)面 /// </summary> /// <returns></returns> [Authorize] public ActionResult Index() { return View(); } /// <summary> /// 上傳文件 /// </summary> /// <param name="filedata"></param> /// <returns></returns> //[Authorize] public ActionResult Upload(HttpPostedFileBase filedata) { //加入認(rèn)證信息 if (this.LoginUser == null) { return new JsonStringResult(string.Format(jsonResult, "{", -1, "抱歉,未登錄,不允許上傳", "", "", "}")); } // 如果沒(méi)有上傳文件 if (filedata == null || filedata.FileName.IsNullOrEmpty() || filedata.ContentLength == 0) { return new JsonStringResult(string.Format(jsonResult, "{", -2, "無(wú)上傳文件", "", "", "}")); } string parmPath = Request.QueryString["path"]; string parmGetzipfile = Request.QueryString["getzipfile"]; if (parmGetzipfile.IsNullOrEmpty()) { parmGetzipfile = "0"; } // 保存到 ~/uploads 文件夾中,名稱(chēng)不變 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)); } // 文件系統(tǒng)不能使用虛擬路徑 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文件,如果沒(méi)有獲取到,則拋出異常 //獲得目錄信息 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測(cè)試如下:
4、注意事項(xiàng)
1、封裝的js類(lèi)庫(kù)適合單文件上傳
2、upload里面的登錄認(rèn)證是通過(guò)判斷當(dāng)前賬號(hào)信息是否為null
3、本項(xiàng)目使用的abp框架,有興趣的可以去了解下:http://www.aspnetboilerplate.com/
以上所述是小編給大家介紹的jQuery.uploadify文件上傳組件實(shí)例講解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- firefox瀏覽器用jquery.uploadify插件上傳時(shí)報(bào)HTTP 302錯(cuò)誤
- 圖片上傳插件jquery.uploadify詳解
- jquery.uploadify插件在chrome瀏覽器頻繁崩潰解決方法
- jQuery.Uploadify插件實(shí)現(xiàn)帶進(jìn)度條的批量上傳功能
- SpringMVC文件上傳 多文件上傳實(shí)例
- jquery.form.js框架實(shí)現(xiàn)文件上傳功能案例解析(springmvc)
- 使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
- SpringMVC + jquery.uploadify實(shí)現(xiàn)上傳文件功能
相關(guān)文章
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載。這是一款鼠標(biāo)點(diǎn)擊分享按鈕向右滑出騰訊微博,新浪微博,QQ空間,豆瓣,微信,二維碼分享等分享平臺(tái),本段代碼比較實(shí)用,需要的朋友參考下吧2016-01-01jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
這篇文章主要介紹了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)及頁(yè)面元素屬性變換的相關(guān)技巧,需要的朋友可以參考下2015-10-10用jQuery技術(shù)實(shí)現(xiàn)Tab頁(yè)界面之二
這個(gè)tab頁(yè)是把數(shù)據(jù)全部取回來(lái)再顯示,所以沒(méi)有數(shù)據(jù)緩存的特點(diǎn)。但是因?yàn)閿?shù)據(jù)全部是顯示的html代碼,所以對(duì)搜索引擎是友好的,也許對(duì)seo有好處。2009-09-09基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過(guò)按鈕改變背景圖片
基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過(guò)按鈕改變背景圖片,發(fā)現(xiàn)用CSS用時(shí)IE6不兼容,所以就用見(jiàn)JQ實(shí)現(xiàn)。2011-07-07基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
這個(gè)和以前弄的圖片遠(yuǎn)處放大有許多相同的地方,比如圖片預(yù)加載、有限容器顯示無(wú)限大圖片。2010-11-11jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話(huà)框(附demo源碼下載)
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話(huà)框,具有可拖動(dòng)、放大、居中及關(guān)閉等功能,提供了2種對(duì)話(huà)框模式供讀者選擇,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jQuery實(shí)現(xiàn)導(dǎo)航滾動(dòng)到指定內(nèi)容效果完整實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航滾動(dòng)到指定內(nèi)容效果,結(jié)合完整實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)變換操作相關(guān)技巧,涉及jQuery插件jquery.scrollto.js的使用,并附帶demo源碼下載供讀者下載參考,需要的朋友可以參考下2016-09-09