IE 코어가 아닌 브라우저에서 jQuery Uploadify가 업로드할 수 없는 문제 해결_jquery

1. jquery 업로드 자기소개:

(1) 안녕하세요 여러분, 저는 jquery 플러그인 제품군에서 비동기 업로드를 구현하는 플러그인입니다. 나만이 아니라 사용하기 더 쉬운 플러그인입니다.

(2), 내 기능:

단일 파일 또는 다중 파일 업로드를 지원하며 동시에 업로드되는 파일 수를 제어할 수 있습니다

PHP, .NET, Java 등 서버측에서 사용할 수 있는 다양한 언어를 지원합니다...

업로드되는 파일 형식과 크기 제한은 매개변수를 통해 구성할 수 있습니다

파일을 선택한 후 자동으로 업로드할지 여부는 매개변수를 통해 구성할 수 있습니다

확장 용이, 각 단계의 콜백 기능 제어 가능(onSelect, onCancel...)

인터페이스 매개변수와 CSS를 통해 모양 제어

Uploadify 홈페이지 주소: http://www.uploadify.com/ 이 페이지에서 그에 대해 더 자세히 알아볼 수 있습니다.

(3), 내 사용법:

baidu.com에 가셔서 google.com 검색해보시면 많이 나와있습니다.

2. Firefox에 문제가 있습니다. 제 문제인가요?

jquery uploadify는 IE에서 정상적으로 업로드할 수 있습니다. 비동기 업로드를 구현하면 업로드 시 각 파일이 서버에 요청을 제출합니다. 각 요청에는 보안 확인, 세션 및 쿠키 확인이 필요합니다. 예, 그게 다입니다. jquery uploadify는 플래시를 사용하여 업로드를 구현하므로 데이터 흐름 요청이 백그라운드로 전송될 때마다 IE는 자동으로 로컬 쿠키 저장소를 묶어 서버로 보냅니다. 그러나 Firefox와 Chrome은 이를 수행하지 않으며 이것이 안전하지 않다고 생각할 것입니다. 하, 그래서요.

이제 이유를 찾았으니 두 가지 개념을 이해해 보겠습니다.

(1), 세션:

세션 상태라고도 알려진 세션은 웹 시스템에서 가장 일반적으로 사용되는 상태이며 현재 브라우저 인스턴스와 관련된 일부 정보를 유지하는 데 사용됩니다. 예를 들어, 로그인한 사용자의 사용자 이름을 세션에 넣을 수 있으며, 세션의 특정 키를 판단하여 사용자가 로그인했는지 여부를 판단할 수 있고, 그렇다면 사용자 이름은 무엇인지 알 수 있습니다.

Session은 각 클라이언트(또는 브라우저 인스턴스)에 대해 "하나의 복사본"이라는 것을 알고 있습니다. 사용자가 처음으로 웹 서버에 연결하면 서버는 SessionID를 사용자에게 식별자로 배포합니다. SessionID는 24자의 임의 문자열입니다. 사용자가 페이지를 제출할 때마다 브라우저는 HTTP 헤더에 SessionID를 포함하고 이를 웹 서버에 제출하므로 웹 서버는 현재 페이지를 요청하는 클라이언트를 구분할 수 있습니다. 그렇다면 ASP.NET 2.0은 어떤 SessionID 저장 모드를 제공합니까?

(2) 쿠키는 때로는 복수형으로도 사용됩니다. 쿠키는 사용자의 신원을 식별하고 세션 추적을 수행하기 위해 특정 웹사이트에서 사용자의 로컬 단말기에 저장한 데이터(일반적으로 암호화됨)를 말합니다.

3. 해결 방법

1.asp.net 환경

Global.asax 파일에 다음 코드를 작성합니다.

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 페이지 사이드 코드--------------- ------*/

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

   this.hfAspSessID.Value = Session.SessionID;

세션 값과 인증 값을 클라이언트 컨트롤에 저장한 후 js를 통해 이 두 값을 가져온 후 다음 플러그인 js 초기화 프로그램에 전달할 수 있습니다.

(세션 값을 컨트롤에 저장하기로 선택한 이유는 클라이언트가 쿠키를 비활성화할까봐 걱정되기 때문입니다.)

/*------다음은 js 코드입니다------- ----- ----------*/

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

                                                                                                                                                               하지만

플러그인이 초기화되면 로컬에 기록된 세션 값과 인증 값을 초기화 메소드에 전달하여 파일 업로드를 위한 비동기 요청이 이루어질 때마다 해당 세션 값이 생성됩니다. 요청 파일에 포함됩니다.

2.C# 환경

위는 asp.net에서의 솔루션인데 C#에서는 어떻게 처리해야 할까요?

파일 업로드를 위한 모든 코드를 수정할 필요가 없도록 이렇게 해결했습니다. 변경 사항은 미미하지만 보안 위험이 있습니다.

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

저희 시스템은 ASP.NET MVC를 기반으로 합니다. 사용자는 암호화를 통해 민감한 정보를 볼 수 없지만, 악의적인 사용자는 시스템 확인을 우회하기 위해 민감한 정보를 해독할 필요가 없습니다.

검증 정보는 프런트엔드에 직접 쓸 수 없습니다. Ajax를 사용하여 백엔드에서 검증 정보를 얻은 다음 이를 플래시에 전달한 다음 인터셉터에서 검증할 수 있습니다.

수정 후:

JS 코드:

ajax는 배경에 사용자 이름을 요청하고 이를 플래시에 전달합니다

$(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="IE 코어가 아닌 브라우저에서 jQuery Uploadify가 업로드할 수 없는 문제 해결_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>

总结

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