一、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=
"<%=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>
|
总结
简单的说，最终的解决办法就是可以在每个引用的文件后面加个随机数，让它每次请求都带个参数，该问题则自动解决
扫一扫
2089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
