首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作Javascript → jQuery uploadify在非IE核心浏览器下无法上传解决例子

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

来源:本站整理 发布时间:2015-8-5 9:49:33 人气:

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>

总结

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

相关下载
栏目导航
本类热门阅览