jQuery：ajaxfileupload.js多文件上传-传值-跨域

在使用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];

03

}

04	for(var iin 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);

10

}

使用：

1	$.ajaxFileUpload({

2	url:'/ajax.php',

3	fileElementId:['img1','img2']//原先是fileElementId:’img1’,通过传递数组实现多文件上传

4

});

传递多个参数

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前添加

1	if(data) {

2	for(var iin data) {

3	jQuery('<input type="hidden" name="' + i +'" value="' + data[i] +'" />').appendTo(form);

4

}

5

}

使用：

1	$.ajaxFileUpload({

2	url:'/ajax.php',

3	fileElementId:['img1','img2'],

4	data:{ }//传递对象结构{name:name1}

5

});

跨域

这个不是插件本身的问题，我的解决方法也只适用于同一主域名

1. 在url的请求返回中添加<script>document.domain = "xxxx.com";</script>
2. 因为请求是通过读取返回页面的文档内容，在这时候实际返回页面是会执行js脚本的，并且该脚本不会进入后续的文档加载中
3. 所以只需将修改文档域与当前页面一致就行
4. 在调用页面添加：document.domain = "xxxx.com";
5. 不修改插件本身

handleError

jquery在1.4以后不支持handleError

所以需要自行添加

01

,

02	handleError:function( s, xhr, status, e ) {

03	// If a local callback was specified, fire it

04	if ( s.error ) {

05	s.error.call( s.context || s, xhr, status, e );

06

}

07	// Fire the global callback

08	if ( s.global ) {

09	(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e] );

10

}

11

}

完整的代码

view source

001	jQuery.extend({

002	createUploadIframe:function(id, uri){

003	//create frame

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');

009	io.id = frameId;

010	io.name = frameId;

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'){

016	io.src = uri;

017

}

018

}

019

}

020	iframeHtml +=' />';

021	jQuery(iframeHtml).appendTo(document.body);

022	return jQuery('#' + frameId).get(0);

023

},

024	createUploadForm:function(id, fileElementId, data){

025	//create form

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>');

029

if(data){

030	for(var iin data){

031	jQuery('<input type="hidden" name="' + i +'" value="' + data[i] +'" />').appendTo(form);

032

}

033

}

034

//single

035	if(typeof(fileElementId) =='string'){

036	fileElementId = [fileElementId];

037

}

038	for(var iin 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);

044

}

045	//set attributes

046	jQuery(form).css('position','absolute');

047	jQuery(form).css('top','-1200px');

048	jQuery(form).css('left','-1200px');

049	jQuery(form).appendTo('body');

050	return form;

051

},

052	ajaxFileUpload:function(s) {

053	// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout

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;

060	// Watch for a new set of requests

061	if ( s.global && ! jQuery.active++ ){

062	jQuery.event.trigger("ajaxStart" );

063

}

064	var requestDone =false;

065	// Create the request object

066	var xml = {};

067	if ( s.global )

068	jQuery.event.trigger("ajaxSend", [xml, s]);

069	// Wait for a response to come back

070	var uploadCallback =function(isTimeout){

071	var io = document.getElementById(frameId);

072	var execontent =function(){

073

try

074

{

075	if(io.contentWindow)

076

{

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;

079

080	}else if(io.contentDocument)

081

{

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;

084

}

085

}catch(e)

086

{

087	jQuery.handleError(s, xml,null, e);

088

}

089	if ( xml || isTimeout =="timeout"){

090	requestDone =true;

091	var status;

092

try {

093	status = isTimeout !="timeout" ?"success" :"error";

094	// Make sure that the request was successful or notmodified

095	if ( status !="error" )

096

{

097	// process the data (runs the xml through httpData regardless of callback)

098	var data = jQuery.uploadHttpData( xml, s.dataType );

099	// If a local callback was specified, fire it and pass it the data

100	if ( s.success )

101	s.success( data, status );

102	// Fire the global callback

103	if( s.global )

104	jQuery.event.trigger("ajaxSuccess", [xml, s] );

105

}else

106	jQuery.handleError(s, xml, status);

107

}catch(e)

108

{

109	status ="error";

110	jQuery.handleError(s, xml, status, e);

111

}

112	// The request was completed

113	if( s.global )

114	jQuery.event.trigger("ajaxComplete", [xml, s] );

115	// Handle the global AJAX counter

116	if ( s.global && ! --jQuery.active )

117	jQuery.event.trigger("ajaxStop" );

118	// Process result

119	if ( s.complete )

120	s.complete(xml, status);

121	jQuery(io).unbind();

122	setTimeout(function(){

123

try{

124	jQuery(io).remove();

125	jQuery(form).remove();

126	}catch(e){

127	jQuery.handleError(s, xml,null, e);

128

}

129

}, 100);

130	xml =null;

131

}

132

};

133	execontent();

134

}

135	// Timeout checker

136	if ( s.timeout > 0 ){

137	setTimeout(function(){

138	// Check to see if the request is still happening

139	if( !requestDone ) uploadCallback("timeout" );

140	}, s.timeout);

141

}

142

try{

143	var form = jQuery('#' + formId);

144	jQuery(form).attr('action', s.url);

145	jQuery(form).attr('method','POST');

146	jQuery(form).attr('target', frameId);

147	if(form.encoding)

148

{

149	jQuery(form).attr('encoding','multipart/form-data');

150

}else{

151	jQuery(form).attr('enctype','multipart/form-data');

152

}

153	jQuery(form).submit();

154	}catch(e){

155	jQuery.handleError(s, xml,null, e);

156

}

157	jQuery('#' + frameId).load(uploadCallback );

158	return {abort:function () {}};

159

},

160	uploadHttpData:function( r, type ) {

161	var data = !type;

162	data = type =="xml" || data ? r.responseXML : r.responseText;

163	// If the type is "script", eval it in global context

164	if ( type =="script" )

165	jQuery.globalEval( data );

166	// Get the JavaScript object, if JSON is used.

167	if ( type =="json" )

168	eval("data = " + data );

169	// evaluate scripts within html

170	if ( type =="html" )

171	jQuery("<div>").html(data).evalScripts();

172	return data;

173

},

174	handleError:function( s, xhr, status, e ){

175	// If a local callback was specified, fire it

176	if ( s.error ) {

177	s.error.call( s.context || s, xhr, status, e );

178

}

179	// Fire the global callback

180	if ( s.global ) {

181	(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e] );

182

}

183

}

184

})

原文链接        jquery判断上传图片的类型大小