Solve the problem that jQuery uploadify cannot upload in non-IE core browsers_jquery

1. jquery uploadify self-introduction:

(1) Hello everyone, I am the plug-in responsible for implementing asynchronous upload in the jquery plug-in family. I am not the only one, I am just the one that is easier to use.

(2), My functions:

Supports single file or multiple file uploads, and can control the number of files uploaded concurrently

Support various languages ​​for use on the server side, such as PHP, .NET, Java...

The uploaded file type and size limit can be configured through parameters

It can be configured through parameters whether to automatically upload the file after selecting it

Easy to expand, can control the callback function of each step (onSelect, onCancel...)

Control appearance through interface parameters and CSS

Uploadify homepage address: http://www.uploadify.com/ You can learn more about him on this page.

(3), my usage:

Go to baidu.com, google.com search search, there are many.

2. I have a problem with firefox. Is it my problem?

jquery uploadify can upload normally under IE. When implementing asynchronous upload, each file will submit a request to the server when uploading. Each request requires security verification, session and cookie verification. Yes, that's it. Since jquery uploadify uses flash to implement uploading, every time a data flow request is sent to the background, IE will automatically bundle the local cookie storage and send it to the server. But Firefox and Chrome will not do this, and they will think it is unsafe. Ha, that's why.

Now that we have found the reason, let us understand two concepts:

(1), session:

Session, also known as session state, is the most commonly used state in Web systems and is used to maintain some information related to the current browser instance. For example, we can put the user name of the logged-in user in the Session, so that we can determine whether the user is logged in by judging a certain Key in the Session, and if so, what is the user name.

We know that Session is "one copy" for each client (or browser instance). When a user establishes a connection with the Web server for the first time, the server will distribute a SessionID to the user as an identifier. SessionID is a random string of 24 characters. Every time the user submits a page, the browser will include the SessionID in the HTTP header and submit it to the web server, so that the web server can distinguish which client is currently requesting the page. So, what modes of storing SessionID does ASP.NET 2.0 provide?

(2) Cookies, sometimes also used in the plural form Cookies, refer to the data (usually encrypted) stored on the user's local terminal by certain websites in order to identify the user's identity and perform session tracking.

3. Solution

1.asp.net environment

In the Global.asax file, write the following 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值赋值给它
  }

/*---------------------------Aspx page side code-------------- ------------------*/

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

   this.hfAspSessID.Value = Session.SessionID;

Save the session value and authentication value to the client control, then you can get these two values ​​​​through js, and then pass them to the following plug-in js initialization program.

(The reason why I chose to store the session value in the control is because I am afraid that the client will disable cookies.)

/*--------------------------------The following is the js code------------ -----------------------*/

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

                                                                                                                                                                        but

When the plug-in is initialized, pass the locally recorded session value and the authentication value to the initialization method for parameter assignment. In this way, every time an asynchronous request is made to upload a file, the corresponding session value is included in the request file. Hit.

2.C# environment

The above is the solution under asp.net, so how should it be handled in C#?

This is how I solved it, so that all the codes for uploading files do not need to be modified. The amount of changes is minimal, but there are security risks:

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

Our system is based on ASP.NET MVC. Although users cannot see sensitive information through encryption, malicious users do not need to decrypt sensitive information to bypass system verification.

The verification information cannot be written directly to the frontend. You can use ajax to obtain the verification information from the backend, then pass it to flash, and then verify it in the interceptor.

After modification:

JS code:

ajax requests the background to obtain the user name and passes it to 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 $

拦截器中代码：

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

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     style="max-width:90%" src='"+imgUrl+"' alt="Solve the problem that jQuery uploadify cannot upload in non-IE core browsers_jquery" ></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>

总结

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