解决jQuery uploadify在非IE核心浏览器下无法上传

之前上传了一个通过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>

总结

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

时间： 2024-10-11 06:42:59

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

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

一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色.渐变通过-webkit-gradient方法实现,可以用来代替图片URL.在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的.您还可以指定多个中间过渡色,此称之为color stops. 二.基本语法 we

svn 无法上传.a 文件的解决办法

1. 在每个用户主文件夹下有一个名为.subversion的隐藏文件夹,打开里面的config文件. 可以打开终端,输出 cd ~ 进入用户主文件夹,cd .subversion ,   vi config 2. 查找 [miscellany] 字段,即可看到下面有个 global-ignores 键名,默认为注释掉了的,这表示SVN已经将它们作为默认值了. 3. 取消注释,把 *.so *.so.[0-9]* *.a 去掉,当然你也可以根据需要增加或减少你的过滤选项. svn 无法上传.a 文

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

解决Uploadify上传控件在非IE浏览器中不工作,需要做如下2步修改: 1.Global.asax文件中,实现Application_BeginRequest函数: void Application_BeginRequest(object sender, EventArgs e) { try { string session_param_name = "ASPSESSID"; string session_cookie_name = "ASP.NET_SessionId&

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

以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的opacity,这种情况下,同时使用opacity和filter就显的有点麻烦了. 其实,只使用opacity+jquery就完全解决这个问题. 用法如下: <script type="text/javascript"> $(function () { $("#p1&qu

解决html5新标签 placeholder 低版本浏览器下不兼容问题

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input type="text" name="userName" placeholder="请输入用户名"> placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性. 然而,在IE9以下版本浏

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

$.getJSON在IE下默认会使用浏览器缓存,所以导致数据不正确或者异常,解决方案就是在使用该方法前关闭缓存,使用完后再重新打开缓存即可. 1 <?php 2 $.ajaxSetup({ cache: false }); 3 $.getJSON("ajax.php",function(data,item) { 4 // 处理逻辑代码 5 $.ajaxSetup({ cache: true }); 6 }); 7 ?> ok啦

解决Mac上svn无法上传.a文件

“.a”(静态库)文件无法上传(svn工具:Versions) 网上查询了一下,说是Xcode自带的svn和Versions以及一些其它工具都不能上传".a"文件. 解决办法如下: 1.打开终端,输入cd,空格,然后将需要上传的.a文件所在的文件夹(不是.a文件)拖拽到终端(此办法无需输入繁琐的路径,快捷方便) ,回车:2.之后再输入如下命令:svn add libGoogleAnalytics.a,回车:3.之后会出现:A  (bin)  libGoogleAnalytics.a 

oracle emca 配置dbcontrol时，无法上传EM资料库配置解决方法

系统环境: windows server 2008 R2 Ent. 64bit 在用emca配置dbcontrol时,提示:"严重: 将配置数据上载到资料档案库时出错",经查是IPV6造成的.把网卡配置中的ipv6禁用掉仍然不行,后又查询资料得知需要修改drivers/etc/下的hosts文件. 故障现象: C:\Users\Administrator>emca -config dbcontrol db EMCA 开始于 2017-9-4 11:51:26 EM Configu

jQuery Uploadify在ASP.NET MVC3中的使用

1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadify.com/ 2.ASP.NET MVC3中的使用Uploadify 搭建ASP.NET MVC3解决方案如下图,其中使用到的Uploadify为3.1版本: 1>.简单示例 _Layout.cshtml代码: <!DOCTYPE html> <html> <head>