ajaxfileupload带参数上传文件
使用Jquery Ajax File Uploader這個(gè)控件上傳
官方網(wǎng)站：http://www.phpletter.com/DOWNLOAD/
這個(gè)控件有個(gè)缺點(diǎn)，就是不能傳遞自定義參數(shù)。通過更改ajaxfileupload.js文件可以解決此問題。
主要更改點(diǎn)32行，增加42行的內(nèi)容，更改56行的內(nèi)容
32/createUploadForm: function(id, fileElementId)
42/增加文本參數(shù)的支持 ?
?? ? ? ?if (data) { ?
?? ? ? ? ? ?for (var i in data) { ?
?? ? ? ? ? ? ? ?$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); ?
?? ? ? ? ? ?} ?
?? ? ? ?} ?
?56/ var form = jQuery.createUploadForm(id, s.fileElementId, s.data);
?
以下是更改后的文件：
?
jQuery.extend({ ?
?? ?createUploadIframe: function(id, uri) ?
?? ?{ ?
?? ? ? ? ? ?//create frame ?
?? ? ? ? ? ?var frameId = 'jUploadFrame' + id; ?
?? ? ? ? ? ? ?
?? ? ? ? ? ?if(window.ActiveXObject) { ?
?? ? ? ? ? ? ? ?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; ?
?? ? ? ? ? ? ? ?} ?
?? ? ? ? ? ?} ?
?? ? ? ? ? ?else { ?
?? ? ? ? ? ? ? ?var io = document.createElement('iframe'); ?
?? ? ? ? ? ? ? ?io.id = frameId; ?
?? ? ? ? ? ? ? ?io.name = frameId; ?
?? ? ? ? ? ?} ?
?? ? ? ? ? ?io.style.position = 'absolute'; ?
?? ? ? ? ? ?io.style.top = '-1000px'; ?
?? ? ? ? ? ?io.style.left = '-1000px'; ?
??
?? ? ? ? ? ?document.body.appendChild(io); ?
??
?? ? ? ? ? ?return io ? ? ? ? ? ??
?? ?}, ?
?? ?createUploadForm: function(id, fileElementId, data) ?
?? ?{ ?
?? ? ? ?//create form ? ??
?? ? ? ?var formId = 'jUploadForm' + id; ?
?? ? ? ?var fileId = 'jUploadFile' + id; ?
?? ? ? ?var form = $('<form ?action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); ??
?? ? ? ?var oldElement = $('#' + fileElementId); ?
?? ? ? ?var newElement = $(oldElement).clone(); ?
?? ? ? ?$(oldElement).attr('id', fileId); ?
?? ? ? ?$(oldElement).before(newElement); ?
?? ? ? ?$(oldElement).appendTo(form); ?
?? ? ? ? ?
?? ? ? ?//增加文本參數(shù)的支持 ?
?? ? ? ?if (data) { ?
?? ? ? ? ? ?for (var i in data) { ?
?? ? ? ? ? ? ? ?$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); ?
?? ? ? ? ? ?} ?
?? ? ? ?} ?
?? ? ? ? ?
?? ? ? ?//set attributes ?
?? ? ? ?$(form).css('position', 'absolute'); ?
?? ? ? ?$(form).css('top', '-1200px'); ?
?? ? ? ?$(form).css('left', '-1200px'); ?
?? ? ? ?$(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, 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", [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 ??
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(io).remove(); ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(form).remove(); ? ??
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?} catch(e) ??
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ ?
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jQuery.handleError(s, xml, null, 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 io = $('#' + frameId); ?
?? ? ? ? ? ?var form = $('#' + formId); ?
?? ? ? ? ? ?$(form).attr('action', s.url); ?
?? ? ? ? ? ?$(form).attr('method', 'POST'); ?
?? ? ? ? ? ?$(form).attr('target', frameId); ?
?? ? ? ? ? ?if(form.encoding) ?
?? ? ? ? ? ?{ ?
?? ? ? ? ? ? ? ?form.encoding = 'multipart/form-data'; ? ? ? ? ? ? ? ?
?? ? ? ? ? ?} ?
?? ? ? ? ? ?else ?
?? ? ? ? ? ?{ ? ? ? ? ? ? ? ??
?? ? ? ? ? ? ? ?form.enctype = 'multipart/form-data'; ?
?? ? ? ? ? ?} ? ? ? ? ? ??
?? ? ? ? ? ?$(form).submit(); ?
??
?? ? ? ?} catch(e) ??
?? ? ? ?{ ? ? ? ? ? ??
?? ? ? ? ? ?jQuery.handleError(s, xml, null, e); ?
?? ? ? ?} ?
?? ? ? ?if(window.attachEvent){ ?
?? ? ? ? ? ?document.getElementById(frameId).attachEvent(' uploadCallback); ?
?? ? ? ?} ?
?? ? ? ?else{ ?
?? ? ? ? ? ?document.getElementById(frameId).addEventListener('load', uploadCallback, false); ?
?? ? ? ?} ? ? ? ??
?? ? ? ?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(); ?
?? ? ? ? ? ?//alert($('param', data).each(function(){alert($(this).attr('value'));})); ?
?? ? ? ?return data; ?
?? ?} ?
}) ?
?
使用方法如下：
?
$.ajaxFileUpload({ ?
?? ? ? ?url: '/ajax/mine/uploadLogo', ?
?? ? ? ?secureuri:false, ?
?? ? ? ?fileElementId:'input_logo', ?
?? ? ? ?dataType: 'json', ?
?? ? ? ?data: {//加入的文本參數(shù) ?
?? ? ? ? ? ?"logoPath": "param1", ?
?? ? ? ? ? ?"logoName": "param2" ?
?? ? ? ?}, ?
?? ? ? ?success: function(data) { ?
?? ? ? ? ? ? ?
?? ? ? ?}, ?
?? ? ? ?error: function() { ?
?? ? ? ? ? ?showError("上傳失敗，請檢查文件是否符合格式要求。"); ?
?? ? ? ??} ?
?? ?}); ?
?
?
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的ajaxfileupload带参数上传文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 终端服务器超过了 最大连接数
- 下一篇： [IE9] 开发IE9上的屏幕取词功能