Résoudre le problème que jQuery uploadify ne peut pas télécharger dans les navigateurs principaux non-IE

1. jquery uploadify auto-présentation :

(1) Bonjour à tous, je suis le plug-in responsable de l'implémentation du téléchargement asynchrone dans la famille des plug-ins jquery, je ne suis pas le seul, je suis juste celui qui est le plus simple à utiliser.

(2), Mes fonctions :

Prend en charge les téléchargements de fichiers uniques ou multiples et peut contrôler le nombre de fichiers téléchargés simultanément

Prise en charge de divers langages à utiliser côté serveur, tels que PHP, .NET, Java...

Le type de fichier téléchargé et la limite de taille peuvent être configurés via les paramètres

Il peut être configuré via des paramètres s'il faut télécharger automatiquement le fichier après l'avoir sélectionné

Facile à développer, peut contrôler la fonction de rappel de chaque étape (onSelect, onCancel...)

Contrôler l'apparence via les paramètres d'interface et CSS

Adresse de la page d'accueil de Uploadify : http://www.uploadify.com/ Vous pouvez en savoir plus sur lui sur cette page.

(3), mon utilisation :

Allez sur baidu.com, recherche google.com, il y en a beaucoup.

2. J'ai un problème avec Firefox. Est-ce mon problème ?

jquery uploadify peut télécharger normalement sous IE Lors de la mise en œuvre du téléchargement asynchrone, chaque fichier soumettra une demande au serveur lors du téléchargement. Chaque demande nécessite une vérification de sécurité, une vérification de session et de cookie. Oui, c'est ça. Étant donné que jquery uploadify utilise Flash pour implémenter le téléchargement, chaque fois qu'une demande de flux de données est envoyée en arrière-plan, IE regroupera automatiquement le stockage des cookies locaux et l'enverra au serveur. Mais Firefox et Chrome ne le feront pas et penseront que cela n’est pas sûr. Ha, c'est pour ça.

Maintenant que nous avons trouvé la raison, comprenons deux concepts :

(1), séance :

La session, également connue sous le nom d'état de session, est l'état le plus couramment utilisé dans les systèmes Web et est utilisée pour conserver certaines informations liées à l'instance actuelle du navigateur. Par exemple, nous pouvons mettre le nom d'utilisateur de l'utilisateur connecté dans la session, afin de pouvoir déterminer si l'utilisateur est connecté en jugeant une certaine clé dans la session, et si oui, quel est le nom d'utilisateur.

Nous savons que Session est "une copie" pour chaque client (ou instance de navigateur) Lorsqu'un utilisateur établit une connexion avec le serveur Web pour la première fois, le serveur distribuera un SessionID à l'utilisateur comme identifiant. SessionID est une chaîne aléatoire de 24 caractères. Chaque fois que l'utilisateur soumet une page, le navigateur inclut le SessionID dans l'en-tête HTTP et le soumet au serveur Web, afin que le serveur Web puisse distinguer quel client demande actuellement la page. Alors, quels modes de stockage de SessionID ASP.NET 2.0 propose-t-il ?

(2) Les cookies, parfois également utilisés au pluriel Cookies, désignent les données (généralement cryptées) stockées sur le terminal local de l'utilisateur par certains sites Internet afin d'identifier l'identité de l'utilisateur et d'effectuer un suivi de session.

3.Solution

Environnement 1.asp.net

Dans le fichier Global.asax, écrivez le code suivant :

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

Copier après la connexion

/*---------------------------Code côté page Aspx-------------- -------------------*/

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

   this.hfAspSessID.Value = Session.SessionID;

Copier après la connexion

Enregistrez la valeur de session et la valeur d'authentification sur le contrôle client, vous pourrez ensuite obtenir ces deux valeurs via js, puis les transmettre au programme d'initialisation js du plug-in suivant.

(La raison pour laquelle j'ai choisi de stocker la valeur de session dans le contrôle est que j'ai peur que le client désactive les cookies.)

/*--------------------------------Ce qui suit est le code 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 },

Copier après la connexion

mais

Lorsque le plug-in est initialisé, transmettez la valeur de session enregistrée localement et la valeur d'authentification à la méthode d'initialisation pour l'attribution des paramètres. De cette façon, chaque fois qu'une requête asynchrone est effectuée pour télécharger un fichier, la valeur de session correspondante est. inclus dans le fichier de demande.

Environnement 2.C#

Ce qui précède est la solution sous asp.net, alors comment doit-il être géré en C# ?

C'est ainsi que je l'ai résolu, afin que tous les codes de téléchargement de fichiers n'aient pas besoin d'être modifiés. Le nombre de modifications est minime, mais il existe des risques de sécurité :

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

Copier après la connexion

Notre système est basé sur ASP.NET MVC. Bien que les utilisateurs ne puissent pas voir les informations sensibles via le cryptage, les utilisateurs malveillants n'ont pas besoin de décrypter les informations sensibles pour contourner la vérification du système.

Les informations de vérification ne peuvent pas être écrites directement sur le frontend. Vous pouvez utiliser ajax pour obtenir les informations de vérification du backend, puis les transmettre au flash, puis les vérifier dans l'intercepteur.

Après modification :

Code JS :

ajax demande à l'arrière-plan d'obtenir le nom d'utilisateur et le transmet à 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 $

Copier après la connexion

拦截器中代码：

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

Copier après la connexion

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>

Copier après la connexion

总结

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