快捷導(dǎo)航

jQuery uploadify在谷歌和火狐瀏覽器上傳失敗的解決方案

更新時(shí)間：2015年08月05日 16:36:44 作者：秋荷雨翔

jquery.uploadify插件是一個(gè)基于jquery來(lái)實(shí)現(xiàn)上傳的，這個(gè)插件很好用，每一次向后臺(tái)發(fā)送數(shù)據(jù)流請(qǐng)求時(shí)，ie會(huì)自動(dòng)把本地cookie存儲(chǔ)捆綁在一起發(fā)送給服務(wù)器。但firefox、chrome不會(huì)這樣做，他們會(huì)認(rèn)為這樣不安全，下面介紹下jQuery uploadify上傳失敗的解決方案

jquery.uploadify插件是一個(gè)基于jquery來(lái)實(shí)現(xiàn)上傳的，這個(gè)插件很好用，每一次向后臺(tái)發(fā)送數(shù)據(jù)流請(qǐng)求時(shí)，ie會(huì)自動(dòng)把本地cookie存儲(chǔ)捆綁在一起發(fā)送給服務(wù)器。但firefox、chrome不會(huì)這樣做，他們會(huì)認(rèn)為這樣不安全，下面小編給大家分享有關(guān)jQuery uploadify在谷歌和火狐瀏覽器上傳失敗的解決方案。

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

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

我們的系統(tǒng)是ASP.NET MVC的，雖說(shuō)通過(guò)加密的方式可以讓用戶看不到敏感信息，但惡意用戶不需要把敏感信息解密出來(lái)就可繞過(guò)系統(tǒng)驗(yàn)證。
驗(yàn)證信息不能直接寫前臺(tái)，可以用ajax從后臺(tái)獲取驗(yàn)證信息，然后傳給flash，然后在攔截器中驗(yàn)證。
修改后：
JS代碼：
ajax請(qǐng)求后臺(tái)獲取用戶名，傳給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('超過(guò)文件上傳大小限制（4M）！');
      return;
     }
     alert('上傳失敗');
    }
   }); //end uploadify
  }
 });
});  //end $

攔截器中代碼：
......

if (this.LoginInfo == null)
{ 
 // 解決uploadify兼容火狐谷歌瀏覽器上傳問(wèn)題
 // 但是，此代碼使系統(tǒng)有安全隱患，F(xiàn)lash程序請(qǐng)求該系統(tǒng)不需要驗(yàn)證
 // 要解決此安全隱患，需要Flash程序傳用戶名和密碼過(guò)來(lái)驗(yàn)證，但是該用戶名和密碼不能寫在前端以便被不法用戶看到
 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;
 }
}

最近還總結(jié)個(gè)問(wèn)題在jquery.uploadify上傳插件導(dǎo)致google崩潰 ，很讓人惱火，最后抓包看看到底什么原因，才發(fā)現(xiàn)原來(lái)谷歌在第一次請(qǐng)求時(shí)，它會(huì)把所有需要引用的文件放入本地緩存，而uploadify需要每次都能請(qǐng)求，所以最后導(dǎo)致了崩潰出現(xiàn)...

如何解決jquery.uploadify上傳插件導(dǎo)致google崩潰的問(wèn)題呢？

解決辦法，可以在每個(gè)引用的文件后面加個(gè)隨機(jī)數(shù)，讓它每次請(qǐng)求都帶個(gè)參數(shù)，該問(wèn)題則自動(dòng)解決