一、jquery uploadify自我介紹:
(1)、大家好,我是jquery插件大家族中負責實現異步上傳的插件,我不是唯一,只是較好用的一款。
(2)、我的功能:
支持單文件或多文件上傳,可控制并發上傳的文件數
在服務器端支持各種語言與之配合使用,諸如PHP,.NET,Java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件后自動上傳
易于擴展,可控制每一步驟的回調函數(onSelect, onCancel……)
通過接口參數和CSS控制外觀
Uploadify主頁地址:http://www.uploadify.com/ 在該頁面你可以了解到關于他的更多內容。
(3)、我的用法:
去baidu.com,google.com search search,很多。
二、firefox下我出故障了,是我的問題嗎?
jquery uploadify在ie下可以正常上傳,在實現異步上傳的時候,每一個文件在上傳時都會提交給服務器一個請求。每個請求都需要安全驗證,session和cookie的校驗。是的,就是這樣。由于jquery uploadify是借助flash來實現上傳的,每一次向后臺發送數據流請求時,ie會自動把本地cookie存儲捆綁在一起發送給服務器。但firefox、chrome不會這樣做,他們會認為這樣不安全。哈,這就是原因。
找到原因了,在讓我們來明白兩個概念:
(1)、session:
Session又稱為會話狀態,是Web系統中最常用的狀態,用于維護和當前瀏覽器實例相關的一些信息。舉個例子來說,我們可以把已登錄用戶的用戶名放在Session中,這樣就能通過判斷Session中的某個Key來判斷用戶是否登錄,如果登錄的話用戶名又是多少。
我們知道,Session對于每一個客戶端(或者說瀏覽器實例)是“人手一份”,用戶首次與Web服務器建立連接的時候,服務器會給用戶分發一個 SessionID作為標識。SessionID是一個由24個字符組成的隨機字符串。用戶每次提交頁面,瀏覽器都會把這個SessionID包含在 HTTP頭中提交給Web服務器,這樣Web服務器就能區分當前請求頁面的是哪一個客戶端。那么,ASP.NET 2.0提供了哪些存儲SessionID的模式呢!
(2)、Cookie,有時也用其復數形式Cookies,指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(通常經過加密)。
三、解決方案
1.asp.net環境下
在Global.asax文件中,編寫如下代碼:
void Application_BeginRequest(object sender, EventArgs e) { try { string session_param_name = "ASPSESSID"; string session_cookie_name = "ASP.NET_SessionId"; if (HttpContext.Current.Request.Form[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]); } else if (HttpContext.Current.Request.QueryString[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]); } } catch { } //此處是身份驗證 try { string auth_param_name = "AUTHID"; string auth_cookie_name = FormsAuthentication.FormsCookieName; if (HttpContext.Current.Request.Form[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]); } else if (HttpContext.Current.Request.QueryString[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]); } } catch { } } private void UpdateCookie(string cookie_name, string cookie_value) { HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name); if (null == cookie) { cookie = new HttpCookie(cookie_name); } cookie.Value = cookie_value; HttpContext.Current.Request.Cookies.Set(cookie);//重新設定請求中的cookie值,將服務器端的session值賦值給它 }
/*---------------------------Aspx頁面端代碼---------------------------------*/
this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value; this.hfAspSessID.Value = Session.SessionID;
把session值及身份驗證值保存到客戶端控件中,然后你就可以通過js獲取這兩個值,然后傳給下面的插件js初始化程序。
(之所以選擇將session值放入到控件中存儲,也是怕客戶端禁用cookie的考慮。)
/*-----------------------------以下是js代碼----------------------------------*/
InitUpload: function(auth, AspSessID) { $("#uploadify").uploadify({ uploader: 'Scripts/jqueryplugins/Infrastructure/uploadify.swf', script: 'Handlers/ResourceHandler.ashx?OpType=UploadResource', cancelImg: 'Scripts/jqueryplugins/Infrastructure/cancel.png', queueID: 'fileQueue', sizeLimit: '21480000000', wmode: 'transparent ', fileExt: '*.zip,*.jpg, *.rar,*.doc,*.docx,*.xls,*.xlsx,*.png,*.pptx,*.ppt,*.pdf,*.swf,*.txt', auto: false, multi: true, scriptData: { ASPSESSID: AspSessID, AUTHID: auth },
...........//更多配置項,您可以查看官方配置文檔
在插件初始化的時候,把本地記錄下來的session值,以及身份驗證值傳給初始化方法,進行參數賦值,這樣,每次異步請求上傳文件的時候,相應的 session值就包含在請求文件中了。
2.C#環境下
以上是asp.net下的解決方法,那么C#中應該如何處理呢?
我是這樣解決的,這樣所有上傳文件的代碼都不需要修改,改動量最小,但是有安全隱患:
if (this.LoginInfo == null){ // 解決uploadify兼容火狐谷歌瀏覽器上傳問題 // 但是,此代碼使系統有安全隱患,Flash程序請求該系統不需要驗證 // 要解決此安全隱患,需要Flash程序傳用戶名和密碼過來驗證,但是該用戶名和密碼不能寫在前端以便被不法用戶看到 if (Request.UserAgent == "Shockwave Flash") { return; } else { filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" }); return; }}
我們的系統是ASP.NET MVC的,雖說通過加密的方式可以讓用戶看不到敏感信息,但惡意用戶不需要把敏感信息解密出來就可繞過系統驗證。
驗證信息不能直接寫前臺,可以用ajax從后臺獲取驗證信息,然后傳給flash,然后在攔截器中驗證。
修改后:
JS代碼:
ajax請求后臺獲取用戶名,傳給flash
$(function () { $.ajax({ url: "/Auth/Account/GetUserNamePwd", type: "POST", dataType: "json", data: {}, success: function (data) { $("#uploadify").uploadify({ height: 25, width: 100, swf: '/Content/Plugins/UploadifyJs/uploadify.swf', uploader: 'UploadFile', formData: { userName: data.data.userName, //ajax獲取的用戶名 pwd: data.data.pwd //ajax獲取的密碼 }, buttonText: '選擇文件上傳', fileSizeLimit: '4MB', fileTypeDesc: '文件', fileTypeExts: '*.*', queueID: 'fileQueue', multi: true, onUploadSuccess: function (fileObj, data, response) { var d = eval("(" + data + ")"); $(".uploadify-queue-item").find(".data").html(" 上傳完成"); $("#url").val(d.url); $("#name").val(d.name); }, onUploadError: function (event, ID, fileObj, errorObj) { if (event.size > 4 * 1024 * 1024) { alert('超過文件上傳大小限制(4M)!'); return; } alert('上傳失敗'); } }); //end uploadify } });}); //end $
攔截器中代碼:
......if (this.LoginInfo == null){ // 解決uploadify兼容火狐谷歌瀏覽器上傳問題 // 但是,此代碼使系統有安全隱患,Flash程序請求該系統不需要驗證 // 要解決此安全隱患,需要Flash程序傳用戶名和密碼過來驗證,但是該用戶名和密碼不能寫在前端以便被不法用戶看到 if (Request.UserAgent == "Shockwave Flash") { string userName = Request.Params["userName"]; string pwd = Request.Params["pwd"]; if (!string.IsNullOrWhiteSpace(userName) && !string.IsNullOrWhiteSpace(pwd)) { AuthDAL authDAL = new AuthDAL(); sys_user user = authDAL.GetUserInfoByName(userName); if (user != null && user.password == pwd) { return; } } } else { filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" }); return; }}......
3.jsp版解決方法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><% String syscontext = request.getContextPath();%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path; String sessionid = session.getId(); %><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="<%=syscontext %>/webcontent/resourceManage/wallpapaer/uploadify/uploadify.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script type="text/javascript" src="<%=syscontext %>/webcontent/resourceManage/wallpapaer/uploadify/jquery.uploadify-3.1.min.js"></script><!-- 注意我使用的jquery uploadify版本--><script type="text/javascript">//用來計算上傳成功的圖片數var successCount = 1;$(function() { var uploadUrl = '<%=basePath%>/uploadresource.do;jsessionid=<%=sessionid%>?Func=uploadwallpaper2Dfs'; var swfUrl2 = "<%=basePath%>/webcontent/resourceManage/wallpapaer/uploadify/uploadify.swf"; $('#file_upload').uploadify({ 'swf' : swfUrl2, 'uploader' : uploadUrl, // Put your options here 'removeCompleted' : false, 'auto' : false, 'method' : 'post', 'onUploadSuccess' : function(file, data, response) { add2SuccessTable(data); } });});/** * 將成功上傳的圖片展示出來 */function add2SuccessTable(data){ var jsonObj = JSON.parse(data); for(var i =0; i < jsonObj.length; i++){ var oneObj = jsonObj[i]; var fileName = oneObj.fileName; var imgUrl = oneObj.imgUrl; var td_FileName = "<td>"+fileName+"</td>"; var td_imgUrl = "<td><img width='150' src='"+imgUrl+"'></img></td>"; var oper = "<td><input type='button' value='刪除' onclick='deleteRow("+successCount+")'/></td>"; var tr = "<tr id='row"+successCount+"'>"+successCount+td_FileName+td_imgUrl+oper+"</tr>"; $("#successTable").append(tr); successCount++; } }function deleteRow(i){ $("#row"+i).empty(); $("#row"+i).remove();}</script><title>Insert title here</title></head><body><input type="file" name="file_upload" id="file_upload" /> <p> <a href="javascript:$('#file_upload').uploadify('upload','*')">開始上傳</a> <a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上傳</a> </p> <table id="successTable"> <tr> <td>文件名</td> <td>圖片</td> <td>操作</td> </tr></table></body></html>
總結
簡單的說,最終的解決辦法就是可以在每個引用的文件后面加個隨機數,讓它每次請求都帶個參數,該問題則自動解決
新聞熱點
疑難解答