Posted by:
努力记 177 篇

努力记，通过记录，计划，让自己的努力可以触碰彩虹！

47,136

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

2013-05-31
5 评论
分享

技术分享 jQuery

在使用jQuery的ajaxfileupload.js插件来处理ajax上传图片功能，但内置的功能有3个问题

不能同时上传多个文件
不能传递参数
主域下的跨域提交问题
以及一个jQuery版本问题handleError

下面说下对于个个问题的处理方式，并在最后放上完整的代码，可以直接复制

同时上传多个文件

var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);

修改为：

if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}

使用：

$.ajaxFileUpload({
	url:'/ajax.php',
	fileElementId:['img1','img2']//原先是fileElementId:’img1’,通过传递数组实现多文件上传
});

传递多个参数

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

if(data) {
for(var i in data) {
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}         
}

使用：

$.ajaxFileUpload({
	url:'/ajax.php',
	fileElementId:['img1','img2'],
	data:{ }//传递对象结构{name:name1}
});

跨域

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

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

handleError

jquery在1.4以后不支持handleError

所以需要自行添加

,
handleError: function( s, xhr, status, e ) {  
// If a local callback was specified, fire it  
if ( s.error ) {  
s.error.call( s.context || s, xhr, status, e );  
}  
// Fire the global callback  
if ( s.global ) {  
 (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );  
}  
}

完整的代码

jQuery.extend({
	createUploadIframe: function(id, uri){
		//create frame
		var frameId = 'jUploadFrame' + id;
		var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
		if(window.ActiveXObject){
			if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){
				var io = document.createElement('iframe');
				io.id = frameId;
				io.name = frameId;
			}else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){
				var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
				if(typeof uri== 'boolean'){
					io.src = 'javascript:false';
				} else if(typeof uri== 'string'){
					io.src = uri;  
				}  
			}
		}
		iframeHtml += ' />';
		jQuery(iframeHtml).appendTo(document.body);
		return jQuery('#' + frameId).get(0);
	},
	createUploadForm: function(id, fileElementId, data){
		//create form
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
		if(data){
			for(var i in data){
				jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
			}
		}
		//single
		if(typeof(fileElementId) == 'string'){
			fileElementId = [fileElementId];
		}
		for(var i in fileElementId){
			var oldElement = jQuery('#' + fileElementId[i]);
			var newElement = jQuery(oldElement).clone();
			jQuery(oldElement).attr('id', fileId);
			jQuery(oldElement).before(newElement);
			jQuery(oldElement).appendTo(form);
		}
		//set attributes
		jQuery(form).css('position', 'absolute');
		jQuery(form).css('top', '-1200px');
		jQuery(form).css('left', '-1200px');
		jQuery(form).appendTo('body');
		return form;
	},
	ajaxFileUpload: function(s) {
		// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
		s = jQuery.extend({}, jQuery.ajaxSettings, s);
		var id = new Date().getTime()       
		var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
		var io = jQuery.createUploadIframe(id, s.secureuri);
		var frameId = 'jUploadFrame' + id;
		var formId = 'jUploadForm' + id;      
		// Watch for a new set of requests
		if ( s.global && ! jQuery.active++ ){
			jQuery.event.trigger( "ajaxStart" );
		}
		var requestDone = false;
		// Create the request object
		var xml = {};
		if ( s.global )
			jQuery.event.trigger("ajaxSend", [xml, s]);
		// Wait for a response to come back
		var uploadCallback = function(isTimeout){
			var io = document.getElementById(frameId);
			var execontent = function(){
				try
				{  
					if(io.contentWindow)
					{
						xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
						xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

					}else if(io.contentDocument)
					{
						xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
						xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
					}
				}catch(e)
				{
				  jQuery.handleError(s, xml, null, e);
				}
				if ( xml || isTimeout == "timeout"){
					requestDone = true;
					var status;
					try {
						status = isTimeout != "timeout" ? "success" : "error";
						// Make sure that the request was successful or notmodified
						if ( status != "error" )
						{
							// process the data (runs the xml through httpData regardless of callback)
							var data = jQuery.uploadHttpData( xml, s.dataType );   
							// If a local callback was specified, fire it and pass it the data
							if ( s.success )
								s.success( data, status );
							// Fire the global callback
							if( s.global )
								jQuery.event.trigger( "ajaxSuccess", [xml, s] );
						} else
							jQuery.handleError(s, xml, status);
					} catch(e)
					{
						status = "error";
						jQuery.handleError(s, xml, status, e);
					}
					// The request was completed
					if( s.global )
						jQuery.event.trigger( "ajaxComplete", [xml, s] );
					// Handle the global AJAX counter
					if ( s.global && ! --jQuery.active )
						jQuery.event.trigger( "ajaxStop" );
					// Process result
					if ( s.complete )
						s.complete(xml, status);
					jQuery(io).unbind();
					setTimeout(function(){
						try{
							jQuery(io).remove();
							jQuery(form).remove();  
						} catch(e){
							jQuery.handleError(s, xml, null, e);
						}
					}, 100);
					xml = null;
				}
			};
			execontent();
		}
		// Timeout checker
		if ( s.timeout > 0 ){
			setTimeout(function(){
				// Check to see if the request is still happening
				if( !requestDone ) uploadCallback( "timeout" );
			}, s.timeout);
		}
		try{
			var form = jQuery('#' + formId);
			jQuery(form).attr('action', s.url);
			jQuery(form).attr('method', 'POST');
			jQuery(form).attr('target', frameId);
			if(form.encoding)
			{
				jQuery(form).attr('encoding', 'multipart/form-data');
			}else{
				jQuery(form).attr('enctype', 'multipart/form-data');
			}
			jQuery(form).submit();
		} catch(e){
			jQuery.handleError(s, xml, null, e);
		}
		jQuery('#' + frameId).load(uploadCallback );
		return {abort: function () {}}; 
	},
	uploadHttpData: function( r, type ) {
		var data = !type;
		data = type == "xml" || data ? r.responseXML : r.responseText;
		// If the type is "script", eval it in global context
		if ( type == "script" )
			jQuery.globalEval( data );
		// Get the JavaScript object, if JSON is used.
		if ( type == "json" )
			eval( "data = " + data );
		// evaluate scripts within html
		if ( type == "html" )
			jQuery("<div>").html(data).evalScripts();
		return data;
	},
	handleError: function( s, xhr, status, e ){
	// If a local callback was specified, fire it  
		if ( s.error ) {
			s.error.call( s.context || s, xhr, status, e );
		}
		// Fire the global callback  
		if ( s.global ) {  
			(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
		}
	}
})

FTL on 2014 年 3 月 13 日 at 下午 5:36 said:

但是后台获取不了动态生成的input name属性怎么办
HttpFileCollection _files = System.Web.HttpContext.Current.Request.Files;
这个只能获取到非动态生成的文件求解决方法
- 努力记 on 2014 年 3 月 14 日 at 上午 9:21 said:
  
  不确定你的前后台有什么绑定关系
  你可以看下提交后的请求头，看是否有name字段的file信息提交
  如果没有，后台肯定就获取不到了，看看是不是代码问题
- 7 on 2015 年 10 月 9 日 at 下午 5:17 said:
  
  fileElementId:[‘img1′,’img2’], 不明白这块是从哪获取的。
杨建伟 on 2014 年 5 月 21 日 at 下午 5:32 said:
7 on 2015 年 10 月 9 日 at 下午 5:17 said:

fileElementId:[‘img1′,’img2’], 不明白这块是从哪获取的

back up ↑

一	二	三	四	五	六	日
« 2月
		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

你的努力

努力记，通过记录，计划，让自己的努力可以触碰彩虹！

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

同时上传多个文件

跨域

handleError

完整的代码

标签云

日历

分类目录

近期文章

网站统计

功能