Lösen Sie das Problem, dass jQuery uploadify nicht in Nicht-IE-Kernbrowsern

1. jquery uploadify Selbstvorstellung:

(1) Hallo zusammen, ich bin das Plug-in, das für die Implementierung des asynchronen Uploads in der JQuery-Plug-in-Familie verantwortlich ist. Ich bin nur derjenige, der einfacher zu verwenden ist.

(2), Meine Funktionen:

Unterstützt das Hochladen einzelner oder mehrerer Dateien und kann die Anzahl der gleichzeitig hochgeladenen Dateien steuern

Unterstützt verschiedene Sprachen zur Verwendung auf der Serverseite, wie PHP, .NET, Java...

Der Typ und die Größenbeschränkung der hochgeladenen Datei können über Parameter konfiguriert werden

Über Parameter kann konfiguriert werden, ob die Datei nach der Auswahl automatisch hochgeladen werden soll

Einfach zu erweitern, kann die Rückruffunktion jedes Schritts steuern (onSelect, onCancel...)

Steuern Sie das Erscheinungsbild über Schnittstellenparameter und CSS

Adresse der Uploadify-Homepage: http://www.uploadify.com/ Auf dieser Seite können Sie mehr über ihn erfahren.

(3), meine Verwendung:

Gehen Sie zu baidu.com, google.com-Suche, es gibt viele.

2. Ich habe ein Problem mit Firefox. Ist es mein Problem?

jquery uploadify kann im IE normal hochgeladen werden. Bei der Implementierung des asynchronen Uploads sendet jede Datei beim Hochladen eine Anfrage an den Server. Jede Anfrage erfordert eine Sicherheitsüberprüfung, Sitzungs- und Cookie-Überprüfung. Ja, das ist es. Da jquery uploadify Flash zum Implementieren des Hochladens verwendet, bündelt der IE jedes Mal, wenn eine Datenflussanforderung an den Hintergrund gesendet wird, automatisch den lokalen Cookie-Speicher und sendet ihn an den Server. Aber Firefox und Chrome werden dies nicht tun und denken, dass es unsicher ist. Ha, deshalb.

Nachdem wir nun den Grund gefunden haben, wollen wir zwei Konzepte verstehen:

(1), Sitzung:

Sitzung, auch Sitzungsstatus genannt, ist der am häufigsten verwendete Status in Websystemen und wird verwendet, um einige Informationen im Zusammenhang mit der aktuellen Browserinstanz zu verwalten. Beispielsweise können wir den Benutzernamen des angemeldeten Benutzers in die Sitzung einfügen, sodass wir anhand eines bestimmten Schlüssels in der Sitzung feststellen können, ob der Benutzer angemeldet ist. Wenn ja, wie lautet der Benutzername?

Wir wissen, dass die Sitzung „eine Kopie“ für jeden Client (oder jede Browserinstanz) ist. Wenn ein Benutzer zum ersten Mal eine Verbindung mit dem Webserver herstellt, verteilt der Server eine Sitzungs-ID als Kennung an den Benutzer. SessionID ist eine zufällige Zeichenfolge aus 24 Zeichen. Jedes Mal, wenn der Benutzer eine Seite übermittelt, fügt der Browser die SessionID in den HTTP-Header ein und übermittelt sie an den Webserver, sodass der Webserver unterscheiden kann, welcher Client die Seite gerade anfordert. Welche Modi zum Speichern der SessionID bietet ASP.NET 2.0?

(2) Cookies, manchmal auch im Plural verwendet, beziehen sich auf Daten (normalerweise verschlüsselt), die von bestimmten Websites auf dem lokalen Endgerät des Benutzers gespeichert werden, um die Identität des Benutzers zu identifizieren und eine Sitzungsverfolgung durchzuführen.

3. Lösung

1.asp.net-Umgebung

Schreiben Sie in die Datei Global.asax den folgenden Code:

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

Nach dem Login kopieren

/*------------Seitencode der Aspx-Seite-------------- ----*/

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

   this.hfAspSessID.Value = Session.SessionID;

Nach dem Login kopieren

Speichern Sie den Sitzungswert und den Authentifizierungswert im Client-Steuerelement. Anschließend können Sie diese beiden Werte über js abrufen und sie dann an das folgende Plug-in-js-Initialisierungsprogramm übergeben.

(Der Grund, warum ich mich dafür entschieden habe, den Sitzungswert im Steuerelement zu speichern, liegt darin, dass ich befürchte, dass der Client Cookies deaktiviert.)

/*--------------------------------Das Folgende ist der JS-Code------- ----- --------*/

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

Nach dem Login kopieren

aber

Übergeben Sie bei der Initialisierung des Plug-Ins den lokal aufgezeichneten Sitzungswert und den Authentifizierungswert zur Parameterzuweisung an die Initialisierungsmethode. Auf diese Weise wird bei jeder asynchronen Anforderung zum Hochladen einer Datei der entsprechende Sitzungswert angezeigt in der Anforderungsdatei enthalten.

2.C#-Umgebung

Das Obige ist die Lösung unter asp.net. Wie sollte sie also in C# gehandhabt werden?

So habe ich es gelöst, sodass nicht alle Codes zum Hochladen von Dateien geändert werden müssen. Der Umfang der Änderungen ist minimal, es bestehen jedoch Sicherheitsrisiken:

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

Nach dem Login kopieren

Unser System basiert auf ASP.NET MVC. Obwohl Benutzer vertrauliche Informationen durch Verschlüsselung nicht sehen können, müssen böswillige Benutzer vertrauliche Informationen nicht entschlüsseln, um die Systemüberprüfung zu umgehen.

Die Verifizierungsinformationen können nicht direkt in das Frontend geschrieben werden. Sie können Ajax verwenden, um die Verifizierungsinformationen vom Backend abzurufen, sie dann an Flash zu übergeben und sie dann im Interceptor zu überprüfen.

Nach der Änderung:

JS-Code:

Ajax fordert den Hintergrund an, um den Benutzernamen zu erhalten, und übergibt ihn an 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 $

Nach dem Login kopieren

拦截器中代码：

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

总结

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