在使用jQuery 的ajaxfileupload.js插件来处理ajax上传图片功能,但内置的功能有3个问题
不能同时上传多个文件 不能传递参数 主域下的跨域提交问题 以及一个jQuery版本问题handleError
下面说下对于个个问题的处理方式,并在最后放上完整的代码 ,可以直接复制
同时上传多个文件
1
var
oldElement = jQuery(
'#'
+ fileElementId);
2
var
newElement = jQuery(oldElement).clone();
3
jQuery(oldElement).attr(
'id'
, fileId);
4
jQuery(oldElement).before(newElement);
5
jQuery(oldElement).appendTo(form);
修改为:
01
if
(
typeof
(fileElementId) ==
'string'
){
02
fileElementId = [fileElementId];
04
for
(
var
i
in
fileElementId){
05
var
oldElement = jQuery(
'#'
+ fileElementId[i]);
06
var
newElement = jQuery(oldElement).clone();
07
jQuery(oldElement).attr(
'id'
, fileId);
08
jQuery(oldElement).before(newElement);
09
jQuery(oldElement).appendTo(form);
使用:
3
fileElementId:[
'img1'
,
'img2'
]
传递多个参数
var form = jQuery.createUploadForm(id, s.fileElementId);
修改为: var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
createUploadForm: function(id, fileElementId)
修改为: createUploadForm: function(id, fileElementId, data)
并在//single前添加
3
jQuery(
'<input type="hidden" name="'
+ i +
'" value="'
+ data[i] +
'" />'
).appendTo(form);
使用:
3
fileElementId:[
'img1'
,
'img2'
],
跨域
这个不是插件本身的问题,我的解决方法也只适用于同一主域名
在url的请求返回中添加<script>document.domain = "xxxx.com";</script>
因为请求是通过读取返回页面的文档内容,在这时候实际返回页面是会执行js脚本的,并且该脚本不会进入后续的文档加载中 所以只需将修改文档域与当前页面一致就行 在调用页面添加:document.domain = "xxxx.com";
不修改插件本身
handleError
jquery在1.4以后不支持handleError
所以需要自行添加
02
handleError:
function
( s, xhr, status, e ) {
05
s.error.call( s.context || s, xhr, status, e );
09
(s.context ? jQuery(s.context) : jQuery.event).trigger(
"ajaxError"
, [xhr, s, e] );
完整的代码
002
createUploadIframe:
function
(id, uri){
004
var
frameId =
'jUploadFrame'
+ id;
005
var
iframeHtml =
'<iframe id="'
+ frameId +
'" name="'
+ frameId +
'" style="position:absolute; top:-9999px; left:-9999px"'
;
006
if
(window.ActiveXObject){
007
if
(jQuery.browser.version==
"9.0"
|| jQuery.browser.version==
"10.0"
){
008
var
io = document.createElement(
'iframe'
);
011
}
else
if
(jQuery.browser.version==
"6.0"
|| jQuery.browser.version==
"7.0"
|| jQuery.browser.version==
"8.0"
){
012
var
io = document.createElement(
'<iframe id="'
+ frameId +
'" name="'
+ frameId +
'" />'
);
013
if
(
typeof
uri==
'boolean'
){
014
io.src =
'javascript:false'
;
015
}
else
if
(
typeof
uri==
'string'
){
021
jQuery(iframeHtml).appendTo(document.body);
022
return
jQuery(
'#'
+ frameId).get(0);
024
createUploadForm:
function
(id, fileElementId, data){
026
var
formId =
'jUploadForm'
+ id;
027
var
fileId =
'jUploadFile'
+ id;
028
var
form = jQuery(
'<form action="" method="POST" name="'
+ formId +
'" id="'
+ formId +
'" enctype="multipart/form-data"></form>'
);
031
jQuery(
'<input type="hidden" name="'
+ i +
'" value="'
+ data[i] +
'" />'
).appendTo(form);
035
if
(
typeof
(fileElementId) ==
'string'
){
036
fileElementId = [fileElementId];
038
for
(
var
i
in
fileElementId){
039
var
oldElement = jQuery(
'#'
+ fileElementId[i]);
040
var
newElement = jQuery(oldElement).clone();
041
jQuery(oldElement).attr(
'id'
, fileId);
042
jQuery(oldElement).before(newElement);
043
jQuery(oldElement).appendTo(form);
046
jQuery(form).css(
'position'
,
'absolute'
);
047
jQuery(form).css(
'top'
,
'-1200px'
);
048
jQuery(form).css(
'left'
,
'-1200px'
);
049
jQuery(form).appendTo(
'body'
);
052
ajaxFileUpload:
function
(s) {
054
s = jQuery.extend({}, jQuery.ajaxSettings, s);
055
var
id =
new
Date().getTime()
056
var
form = jQuery.createUploadForm(id, s.fileElementId, (
typeof
(s.data)==
'undefined'
?
false
:s.data));
057
var
io = jQuery.createUploadIframe(id, s.secureuri);
058
var
frameId =
'jUploadFrame'
+ id;
059
var
formId =
'jUploadForm'
+ id;
061
if
( s.global && ! jQuery.active++ ){
062
jQuery.event.trigger(
"ajaxStart"
);
064
var
requestDone =
false
;
068
jQuery.event.trigger(
"ajaxSend"
, [xml, s]);
070
var
uploadCallback =
function
(isTimeout){
071
var
io = document.getElementById(frameId);
072
var
execontent =
function
(){
077
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:
null
;
078
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
080
}
else
if
(io.contentDocument)
082
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:
null
;
083
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
087
jQuery.handleError(s, xml,
null
, e);
089
if
( xml || isTimeout ==
"timeout"
){
093
status = isTimeout !=
"timeout"
?
"success"
:
"error"
;
095
if
( status !=
"error"
)
098
var
data = jQuery.uploadHttpData( xml, s.dataType );
101
s.success( data, status );
104
jQuery.event.trigger(
"ajaxSuccess"
, [xml, s] );
106
jQuery.handleError(s, xml, status);
110
jQuery.handleError(s, xml, status, e);
114
jQuery.event.trigger(
"ajaxComplete"
, [xml, s] );
116
if
( s.global && ! --jQuery.active )
117
jQuery.event.trigger(
"ajaxStop"
);
120
s.complete(xml, status);
122
setTimeout(
function
(){
125
jQuery(form).remove();
127
jQuery.handleError(s, xml,
null
, e);
136
if
( s.timeout > 0 ){
137
setTimeout(
function
(){
139
if
( !requestDone ) uploadCallback(
"timeout"
);
143
var
form = jQuery(
'#'
+ formId);
144
jQuery(form).attr(
'action'
, s.url);
145
jQuery(form).attr(
'method'
,
'POST'
);
146
jQuery(form).attr(
'target'
, frameId);
149
jQuery(form).attr(
'encoding'
,
'multipart/form-data'
);
151
jQuery(form).attr(
'enctype'
,
'multipart/form-data'
);
153
jQuery(form).submit();
155
jQuery.handleError(s, xml,
null
, e);
157
jQuery(
'#'
+ frameId).load(uploadCallback );
158
return
{abort:
function
() {}};
160
uploadHttpData:
function
( r, type ) {
162
data = type ==
"xml"
|| data ? r.responseXML : r.responseText;
164
if
( type ==
"script"
)
165
jQuery.globalEval( data );
168
eval(
"data = "
+ data );
171
jQuery(
"<div>"
).html(data).evalScripts();
174
handleError:
function
( s, xhr, status, e ){
177
s.error.call( s.context || s, xhr, status, e );
181
(s.context ? jQuery(s.context) : jQuery.event).trigger(
"ajaxError"
, [xhr, s, e] );
原文链接
jquery判断上传图片的类型大小