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

本文主要是介绍ajaxfileupload实现单个或多个文件的上传，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• 核心js类库：

  jQuery.extend( {handleError : function(s, xhr, status, e) {if (s.error)s.error(xhr, status, e);else if (xhr.responseText)console.log(xhr.responseText);}
  });
  jQuery.extend( {//创建上传的FramecreateUploadIframe : function(id, uri) {// create framevar 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);},//动态创建上传FormcreateUploadForm : function(id, fileElementId, data) {// create formvar 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 attributesjQuery(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 timeouts = 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 requestsif (s.global && !jQuery.active++) {jQuery.event.trigger("ajaxStart");}var requestDone = false;// Create the request objectvar xml = {};if (s.global)jQuery.event.trigger("ajaxSend", [ xml, s ]);// Wait for a response to come backvar 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// notmodifiedif (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 dataif (s.success)s.success(data, status);// Fire the global callbackif (s.global)jQuery.event.trigger("ajaxSuccess", [ xml, s ]);} elsejQuery.handleError(s, xml, status);} catch (e) {status = "error";jQuery.handleError(s, xml, status, e);}// The request was completedif (s.global)jQuery.event.trigger("ajaxComplete", [ xml, s ]);// Handle the global AJAX counterif (s.global && !--jQuery.active)jQuery.event.trigger("ajaxStop");// Process resultif (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;}}// Timeout checkerif (s.timeout > 0) {setTimeout(function() {// Check to see if the request is still happeningif (!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 contextif (type == "script")jQuery.globalEval(data);// Get the JavaScript object, if JSON is used.if (type == "json")eval("data = " + data);// evaluate scripts within htmlif (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,//上传文件IDdata: params,//表单值dataType : 'text', error:function(){window.location.href="500";//跳转到500页面},success: function (result,status) {}

  
  
  

这篇关于ajaxfileupload实现单个或多个文件的上传的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---