快捷導(dǎo)航

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

更新時間：2015年08月05日 08:42:29 投稿：hebedich

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

一、jquery uploadify自我介紹：

(1)、大家好，我是jquery插件大家族中負(fù)責(zé)實現(xiàn)異步上傳的插件，我不是唯一，只是較好用的一款。

(2)、我的功能：

　　支持單文件或多文件上傳，可控制并發(fā)上傳的文件數(shù)

　　　　在服務(wù)器端支持各種語言與之配合使用，諸如PHP,.NET,Java……

　　　　通過參數(shù)可配置上傳文件類型及大小限制

　　　　通過參數(shù)可配置是否選擇文件后自動上傳

　　　　易于擴(kuò)展，可控制每一步驟的回調(diào)函數(shù)(onSelect, onCancel……)

　　　　通過接口參數(shù)和CSS控制外觀

　　　　Uploadify主頁地址：http://www.uploadify.com/ 在該頁面你可以了解到關(guān)于他的更多內(nèi)容。

(3)、我的用法：

去baidu.com,google.com search search，很多。

二、firefox下我出故障了，是我的問題嗎？

jquery uploadify在ie下可以正常上傳，在實現(xiàn)異步上傳的時候，每一個文件在上傳時都會提交給服務(wù)器一個請求。每個請求都需要安全驗證，session和cookie的校驗。是的，就是這樣。由于jquery uploadify是借助flash來實現(xiàn)上傳的，每一次向后臺發(fā)送數(shù)據(jù)流請求時，ie會自動把本地cookie存儲捆綁在一起發(fā)送給服務(wù)器。但firefox、chrome不會這樣做，他們會認(rèn)為這樣不安全。哈，這就是原因。

找到原因了，在讓我們來明白兩個概念：

(1)、session:

Session又稱為會話狀態(tài)，是Web系統(tǒng)中最常用的狀態(tài)，用于維護(hù)和當(dāng)前瀏覽器實例相關(guān)的一些信息。舉個例子來說，我們可以把已登錄用戶的用戶名放在Session中，這樣就能通過判斷Session中的某個Key來判斷用戶是否登錄，如果登錄的話用戶名又是多少。

我們知道，Session對于每一個客戶端（或者說瀏覽器實例）是“人手一份”，用戶首次與Web服務(wù)器建立連接的時候，服務(wù)器會給用戶分發(fā)一個 SessionID作為標(biāo)識。SessionID是一個由24個字符組成的隨機(jī)字符串。用戶每次提交頁面，瀏覽器都會把這個SessionID包含在 HTTP頭中提交給Web服務(wù)器，這樣Web服務(wù)器就能區(qū)分當(dāng)前請求頁面的是哪一個客戶端。那么，ASP.NET 2.0提供了哪些存儲SessionID的模式呢！

(2)、Cookie，有時也用其復(fù)數(shù)形式Cookies，指某些網(wǎng)站為了辨別用戶身份、進(jìn)行session跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。

三、解決方案

1.asp.net環(huán)境下

在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);//重新設(shè)定請求中的cookie值，將服務(wù)器端的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值，以及身份驗證值傳給初始化方法，進(jìn)行參數(shù)賦值，這樣，每次異步請求上傳文件的時候，相應(yīng)的 session值就包含在請求文件中了。

2.C#環(huán)境下

以上是asp.net下的解決方法，那么C#中應(yīng)該如何處理呢？

我是這樣解決的，這樣所有上傳文件的代碼都不需要修改，改動量最小，但是有安全隱患：

if (this.LoginInfo == null)
{
  // 解決uploadify兼容火狐谷歌瀏覽器上傳問題
  // 但是，此代碼使系統(tǒng)有安全隱患，F(xiàn)lash程序請求該系統(tǒng)不需要驗證
  // 要解決此安全隱患，需要Flash程序傳用戶名和密碼過來驗證，但是該用戶名和密碼不能寫在前端以便被不法用戶看到
  if (Request.UserAgent == "Shockwave Flash")
  {
    return;
  }
  else
  {
    filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" });
    return;
  }
}

我們的系統(tǒng)是ASP.NET MVC的，雖說通過加密的方式可以讓用戶看不到敏感信息，但惡意用戶不需要把敏感信息解密出來就可繞過系統(tǒng)驗證。

驗證信息不能直接寫前臺，可以用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("&nbsp;&nbsp;上傳完成");
          $("#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兼容火狐谷歌瀏覽器上傳問題
  // 但是，此代碼使系統(tǒng)有安全隱患，F(xiàn)lash程序請求該系統(tǒng)不需要驗證
  // 要解決此安全隱患，需要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">
//用來計算上傳成功的圖片數(shù)
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>&nbsp;&nbsp;
		<a href="javascript:$('#file_upload').uploadify('cancel', '*')">取消所有上傳</a>
	</p> 
<table id="successTable">
	<tr>
		<td>文件名</td>
		<td>圖片</td>
		<td>操作</td>
	</tr>
</table>
</body>
</html>

總結(jié)

簡單的說，最終的解決辦法就是可以在每個引用的文件后面加個隨機(jī)數(shù)，讓它每次請求都帶個參數(shù)，該問題則自動解決

您可能感興趣的文章: