之前上传了一个通过Flash实现多文件上传，但是在IE正常运行，FireFox 不能正常上传。经过反复研究学习，之所以firefox和360浏览器无法正常运行，是因为FireFox、chrome、360浏览器等支持HTML5的浏览器不会再文件上传时自动带入session信息和cookie，不共享session。

一、jquery uploadify自我介绍：

(1)、大家好，我是jquery插件大家族中负责实现异步上传的插件，我不是唯一，只是较好用的一款。

(2)、我的功能：

　　支持单文件或多文件上传，可控制并发上传的文件数

　　　　在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……

　　　　通过参数可配置上传文件类型及大小限制

　　　　通过参数可配置是否选择文件后自动上传

　　　　易于扩展，可控制每一步骤的回调函数(onSelect, onCancel……)

　　　　通过接口参数和CSS控制外观

　　　　Uploadify主页地址：http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。

(3)、我的用法：

去baidu.com,google.com  search search，很多。

二、firefox下我出故障了，是我的问题吗？

jquery uploadify在ie下可以正常上传，在实现异步上传的时候，每一个文件在上传时都会提交给服务器一个请求。每个请求都需要安全验证，session和cookie的校验。是的，就是这样。由于jquery uploadify是借助flash来实现上传的，每一次向后台发送数据流请求时，ie会自动把本地cookie存储捆绑在一起发送给服务器。但firefox、chrome不会这样做，他们会认为这样不安全。哈，这就是原因。

找到原因了，在让我们来明白两个概念：

(1)、session:

Session又称为会话状态，是Web系统中最常用的状态，用于维护和当前浏览器实例相关的一些信息。举个例子来说，我们可以把已登录用户的用户名放在Session中，这样就能通过判断Session中的某个Key来判断用户是否登录，如果登录的话用户名又是多少。

我们知道，Session对于每一个客户端（或者说浏览器实例）是“人手一份”，用户首次与Web服务器建立连接的时候，服务器会给用户分发一个 SessionID作为标识。SessionID是一个由24个字符组成的随机字符串。用户每次提交页面，浏览器都会把这个SessionID包含在 HTTP头中提交给Web服务器，这样Web服务器就能区分当前请求页面的是哪一个客户端。那么，ASP.NET 2.0提供了哪些存储SessionID的模式呢！

(2)、Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。

三、解决方案

1.asp.net环境下

在Global.asax文件中，编写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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页面端代码---------------------------------*/

1
2
3
4
this.hfAuth.Value = Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value;
 
 
this.hfAspSessID.Value = Session.SessionID;

把session值及身份验证值保存到客户端控件中，然后你就可以通过js获取这两个值，然后传给下面的插件js初始化程序。

(之所以选择将session值放入到控件中存储，也是怕客户端禁用cookie的考虑。)

/*-----------------------------以下是js代码----------------------------------*/

1
2
3
4
5
6
7
8
9
10
11
12
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 },

...........//更多配置项，您可以查看官方配置文档

在插件初始化的时候，把本地记录下来的session值，以及身份验证值传给初始化方法，进行参数赋值，这样，每次异步请求上传文件的时候，相应的 session值就包含在请求文件中了。

2.C#环境下

以上是asp.net下的解决方法，那么C#中应该如何处理呢？

我是这样解决的，这样所有上传文件的代码都不需要修改，改动量最小，但是有安全隐患：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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从后台获取验证信息，然后传给flash，然后在拦截器中验证。

修改后：

JS代码：

ajax请求后台获取用户名，传给flash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(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 $

拦截器中代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
......
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版解决方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<%@ 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%>?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>

总结

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

解决jQuery uploadify在非IE核心浏览器下无法上传的更多相关文章

  1. jQuery uploadify在谷歌和火狐浏览器下无法上传

    原因: 由于jQuery uploadify是借助flash来实现上传的,每一次向后台发送数据流请求时,ie会自动把本地cookie存储捆绑在一起发送给服务器.但firefox.chrome不会这样做 ...

  2. jquery uploadify在谷歌浏和火狐下无法上传的解决方案(.Net版)

    在项目紧张的进行过程中,jquery uploadify上传不兼容的问题一直没有试着去解决,只幻想着用ie的人越来越多,怎么奈何firefox4刚推出,就有4000万的下载.......仰天长叹,记生 ...

  3. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  4. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案

    解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Applicatio ...

  6. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  7. jQuery的$.getJSON方法在IE浏览器下失效的解决方案

    $.getJSON在IE下默认会使用浏览器缓存,所以导致数据不正确或者异常,解决方案就是在使用该方法前关闭缓存,使用完后再重新打开缓存即可. <?php $.ajaxSetup({ cache: ...

  8. ie浏览器下HTML上传控件input=file的美化

    近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...

  9. 解决更新ssh后在/etc/init.d下无sshd的问题

    1.将远程服务器的/etc/init.d/ssd  文件拷贝到本地 scp /etc/init.d/ssh  root@IP地址:/etc/init.d 2.vi /etc/init.d/sshd 3 ...

随机推荐

  1. MyBatis 实现分页功能

    MySQL 的分页功能是基于内存的分页(即查出来所有记录,再按起始位置和页面容量取出结果). 案例:①根据用户名(支持模糊查询).用户角色 id 查询用户列表(即根据用户名称或根据用户角色 id 又或 ...

  2. Go：面向"对象"

    一.封装 封装的实现步骤: 将结构体.字段的首字母小写(不能被导出): 给结构体所在的包提供一个工厂模式的函数,首字母大写.类似一个构造函数: 提供一个首字母大写的方法,由于获取结构体属性的值. 二. ...

  3. Python之基础练习题

    Python之基础练习题 1.执行 Python 脚本的两种方式 2.简述位.字节的关系 解:8位是一个字节 3.简述 ascii.unicode.utf-8.gbk 的关系 4.请写出 “李杰” 分 ...

  4. mybatis返回map类型数据空值字段不显示(三种解决方法)

    转http://blog.csdn.net/lulidaitian/article/details/70941769 一.查询sql添加每个字段的判断空 IFNULL(rate,'') as rate ...

  5. First C program

    come from https://mooc.study.163.com/learn/1000002011?tid=2001530003#/learn/content?type=detail& ...

  6. Windows Server 2012 防火墙如何添加端口例外的方法(转)

    Windows Server 2012 防火墙如何添加端口例外的方法 Windows Server 2012 防火墙如何添加端口例外的方法 在Windows Server 2012系统中,如果用户想在 ...

  7. [NOIP2005] 普及组 循环

    陶陶摘苹果 校门外的树 采药 以上三道都不是重点 循环 题目描述 乐乐是一个聪明而又勤奋好学的孩子.他总喜欢探求事物的规律.一天,他突然对数的正整数次幂产生了兴趣. 众所周知,2的正整数次幂最后一位数 ...

  8. csu - 1536: Bit String Reordering (模拟)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1536 不知道为何怎么写都写不对. 这题可以模拟. 虽然题目保证一定可以从原串变成目标串,但是不一定 ...

  9. Java并发包——线程池

    Java并发包——线程池 摘要:本文主要学习了Java并发包中的线程池. 部分内容来自以下博客: https://www.cnblogs.com/dolphin0520/p/3932921.html ...

  10. JVM(二):Java中的语法糖

    JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...