jQuery uploadify在非IE核心浏览器下无法上传解决实例, 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='删除' /></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> |
总结
简单的说,最终的解决办法就是可以在每个引用的文件后面加个随机数,让它每次请求都带个参数,该问题则自动解决。