Selesaikan masalah yang jQuery uploadify tidak boleh muat naik dalam browsers

1. muat naik jquery pengenalan diri:

(1) Hello semua, saya adalah pemalam yang bertanggungjawab untuk melaksanakan muat naik tak segerak dalam keluarga pemalam jquery, saya bukan seorang sahaja, hanya saya yang lebih mudah digunakan.

(2), Fungsi saya:

Menyokong muat naik fail tunggal atau berbilang fail, dan boleh mengawal bilangan fail yang dimuat naik serentak

Menyokong pelbagai bahasa untuk digunakan pada bahagian pelayan, seperti PHP, .NET, Java...

Jenis fail dan had saiz yang dimuat naik boleh dikonfigurasikan melalui parameter

Ia boleh dikonfigurasikan melalui parameter sama ada untuk memuat naik fail secara automatik selepas memilihnya

Mudah untuk dikembangkan, boleh mengawal fungsi panggil balik setiap langkah (onSelect, onCancel...)

Kawal penampilan melalui parameter antara muka dan CSS

Muat naik alamat halaman utama: http://www.uploadify.com/ Anda boleh mengetahui lebih lanjut tentang dia di halaman ini.

(3), penggunaan saya:

Pergi ke baidu.com, carian carian google.com, ada banyak.

2. Saya ada masalah dengan firefox.

muat naik jquery boleh memuat naik seperti biasa di bawah IE Apabila melaksanakan muat naik tak segerak, setiap fail akan menyerahkan permintaan kepada pelayan semasa memuat naik. Setiap permintaan memerlukan pengesahan keselamatan, sesi dan pengesahan kuki. Ya, itu sahaja. Memandangkan muat naik jquery menggunakan kilat untuk melaksanakan muat naik, setiap kali permintaan aliran data dihantar ke latar belakang, IE akan secara automatik menggabungkan storan kuki tempatan dan menghantarnya ke pelayan. Tetapi Firefox dan Chrome tidak akan melakukan ini, dan mereka akan fikir ia tidak selamat. Ha, sebab tu.

Memandangkan kita telah menemui sebabnya, mari kita fahami dua konsep:

(1), sesi:

Sesi, juga dikenali sebagai keadaan sesi, ialah keadaan yang paling biasa digunakan dalam sistem Web dan digunakan untuk mengekalkan beberapa maklumat yang berkaitan dengan tika penyemak imbas semasa. Sebagai contoh, kita boleh meletakkan nama pengguna pengguna log masuk dalam Sesi, supaya kita boleh menentukan sama ada pengguna log masuk dengan menilai Kunci tertentu dalam Sesi, dan jika ya, apakah nama pengguna itu.

Kami tahu bahawa Sesi ialah "satu salinan" untuk setiap klien (atau contoh penyemak imbas Apabila pengguna membuat sambungan dengan pelayan Web untuk kali pertama, pelayan akan mengedarkan SessionID kepada pengguna sebagai pengecam). SessionID ialah rentetan rawak 24 aksara. Setiap kali pengguna menyerahkan halaman, penyemak imbas akan memasukkan SessionID dalam pengepala HTTP dan menyerahkannya ke pelayan web, supaya pelayan web dapat membezakan klien yang sedang meminta halaman tersebut. Jadi, apakah mod penyimpanan SessionID yang disediakan oleh ASP.NET 2.0?

(2) Kuki, kadangkala turut digunakan dalam bentuk jamak Kuki, merujuk kepada data (biasanya disulitkan) yang disimpan pada terminal setempat pengguna oleh tapak web tertentu untuk mengenal pasti identiti pengguna dan melaksanakan penjejakan sesi.

3. Penyelesaian

Persekitaran 1.asp.net

Dalam fail Global.asax, tulis kod berikut:

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值赋值给它
  }

Salin selepas log masuk

/*-------------------------- Kod sisi halaman Aspx-------------- -------------------*/

 　　this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null &#63; string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value;
   

   this.hfAspSessID.Value = Session.SessionID;

Salin selepas log masuk

Simpan nilai sesi dan nilai pengesahan ke kawalan klien, kemudian anda boleh mendapatkan kedua-dua nilai ini melalui js, dan kemudian hantarkannya ke program permulaan js pemalam berikut.

(Sebab mengapa saya memilih untuk menyimpan nilai sesi dalam kawalan adalah kerana saya takut pelanggan akan melumpuhkan kuki.)

/*--------------------------------Berikut ialah kod js-------- ----- -----------------------*/

  InitUpload: function(auth, AspSessID) {
    $("#uploadify").uploadify({
      uploader: 'Scripts/jqueryplugins/Infrastructure/uploadify.swf',
      script: 'Handlers/ResourceHandler.ashx&#63;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 },

Salin selepas log masuk

tetapi

Apabila pemalam dimulakan, hantar nilai sesi yang direkodkan secara setempat dan nilai pengesahan kepada kaedah permulaan untuk penetapan parameter Dengan cara ini, setiap kali permintaan tak segerak dibuat untuk memuat naik fail, nilai sesi yang sepadan ialah disertakan dalam fail permintaan.

Persekitaran 2.C#

Di atas adalah penyelesaian di bawah asp.net, jadi bagaimanakah ia harus dikendalikan dalam C#?

Beginilah cara saya menyelesaikannya, supaya semua kod untuk memuat naik fail tidak perlu diubah suai Jumlah perubahan adalah minimum, tetapi terdapat risiko keselamatan:

if (this.LoginInfo == null)
{
  // 解决uploadify兼容火狐谷歌浏览器上传问题
  // 但是，此代码使系统有安全隐患，Flash程序请求该系统不需要验证
  // 要解决此安全隐患，需要Flash程序传用户名和密码过来验证，但是该用户名和密码不能写在前端以便被不法用户看到
  if (Request.UserAgent == "Shockwave Flash")
  {
    return;
  }
  else
  {
    filterContext.Result = RedirectToAction("LoginAgain", "Account", new { Area = "Auth" });
    return;
  }
}

Salin selepas log masuk

Sistem kami adalah berdasarkan ASP.NET MVC Walaupun pengguna tidak dapat melihat maklumat sensitif melalui penyulitan, pengguna berniat jahat tidak perlu menyahsulit maklumat sensitif untuk memintas pengesahan sistem.

Maklumat pengesahan tidak boleh ditulis terus ke bahagian hadapan Anda boleh menggunakan ajax untuk mendapatkan maklumat pengesahan daripada bahagian belakang, kemudian hantarkannya ke flash, dan kemudian sahkannya dalam pemintas.

Selepas pengubahsuaian:

Kod JS:

ajax meminta latar belakang untuk mendapatkan nama pengguna dan menyerahkannya untuk berkelip

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

Salin selepas log masuk

拦截器中代码：

......
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;
  }
}
......

Salin selepas log masuk

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%>&#63;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>

Salin selepas log masuk

总结

简单的说，最终的解决办法就是可以在每个引用的文件后面加个随机数，让它每次请求都带个参数，该问题则自动解决