解決jQuery uploadify在非IE核心瀏覽器下無法上傳

2024-05-06 16:24:21

字體：大中小

來源：轉載

供稿：網友

之前上傳了一個通過Flash實現多文件上傳，但是在IE正常運行，FireFox 不能正常上傳。經過反復研究學習，之所以firefox和360瀏覽器無法正常運行，是因為FireFox、chrome、360瀏覽器等支持HTML5的瀏覽器不會再文件上傳時自動帶入session信息和cookie，不共享session。

一、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>



<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>