ajaxfileupload实现单个或多个文件的上传

前端之家收集整理的这篇文章主要介绍了ajaxfileupload实现单个或多个文件的上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  • 核心js类库:
    jQuery.extend( {
    	handleError : function(s,xhr,status,e) {
    		if (s.error)
    			s.error(xhr,e);
    		else if (xhr.responseText)
    			console.log(xhr.responseText);
    	}
    });
    jQuery
    		.extend( {
                //创建上传的Frame
    			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 (typeof uri == 'boolean') {
    					iframeHtml += ' src="' + 'javascript:false' + '"';
    
    				} else if (typeof uri == 'string') {
    					iframeHtml += ' src="' + uri + '"';
    
    				}
    			}
    			iframeHtml += ' />';
    			jQuery(iframeHtml).appendTo(document.body);
    
    			return jQuery('#' + frameId).get(0);
    		},//动态创建上传Form
    		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);
    				}
    			}
    			//单个文件上传
    			/*var oldElement = jQuery('#' + fileElementId);
    			var newElement = jQuery(oldElement).clone();
    			jQuery(oldElement).attr('id',fileId);
    			jQuery(oldElement).before(newElement);
    			jQuery(oldElement).appendTo(form);*/
    
    			//多文件上传
    		    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);  
    		    }  
    		    //end
    		    
    			// 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);
    				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",s ]);
    						} else
    							jQuery.handleError(s,status);
    					} catch (e) {
    						status = "error";
    						jQuery.handleError(s,e);
    					}
    
    					// The request was completed
    					if (s.global)
    						jQuery.event.trigger("ajaxComplete",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,e);
    						}
    
    					},100);
    
    					xml = null;
    
    				}
    			}
    			// 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,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;
    		}
    		});
    

  • 使用方法:

  •   //HTML页面标签为file类型的ID
    var files = ['bizLisnScanFile','credScanFile'];	<strong></strong><pre name="code" class="java" style="display: inline !important; ">var params = serializeObject($('#formcompany'));
     
    $.ajaxFileUpload({
    	            url: 'goxxxx',secureuri :false,fileElementId :files,//上传文件ID
    	            data: params,//表单值
    	            dataType : 'text',error:function(){
    					 window.location.href="500";//跳转到500页面
    				},success: function (result,status) {}

猜你在找的Ajax相关文章