ajaxuploadjs源碼分析,ajaxFileUpload

本文目錄一覽：

• 1、php文件上傳（利用ajaxfileupload.js）
• 2、引用（ajaxfileupload.js） ajaxfileupload.js報這錯jQuery.handleError is not a function
• 3、求 javascript ajaxfileupload.js
• 4、ajaxfileupload.js上傳文件時後台用java怎麼接收文件流
• 5、java 使用 AjaxUpload.js 實現上傳文檔的時候需要注意哪些？

php文件上傳（利用ajaxfileupload.js）

這個是js錯誤，是ajax無法解析返回結果導致的錯誤， $.ajaxFileUpload 的返回值支持 xml 和 json格式

如果dataType 設置為json 格式 在php 文件要輸出的話 就需要用echo json_encode($_FILES); 來輸出$_FILES 數組中所有的值，

如果只需要輸入部分 就需要構造個 這樣：

$res = array();

$res[‘file_name’] = $_FILES[‘file’][‘name’];

echo json_encode($res);

如果dataType 設置為 xml 的話，那就要自己將輸出結果構造成 xml格式

引用（ajaxfileupload.js） ajaxfileupload.js報這錯jQuery.handleError is not a function

在做ajaxFileUpload時，我也遇到這個問題，同時還有其它的問題，用了一下午的時間解決了：

問題1：如樓主所說，jQuery.handleError is not a function 原因是，經測試handlerError只在jquery-1.4.2之前的版本中存在，jquery-1.6 和1.7中都沒有這個函數了，因此在1.4.2中將這個函數複製到了ajaxFileUpload.js中，問題解決

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

}

},

問題2：一直得到error ，無法執行指定的success方法。通過追蹤ajaxFileUpload的執行過程發現，在調用它自身的uploadHttpData函數時，當執行if（type==”json”) eval(“data = “+data);

會拋出異常，導致在處理異常的時候將status = “error” 因此一直執行error方法。

上網查詢，得知eval函數是用來執行一段js代碼，而並不是如我所想的反解json串

eval(“data = “+data);的意思是 將data 賦值給 data參數 ，但是當我返回給頁面的是一個簡單的字符串，比如”OK” ，時，這樣寫就拋出異常。最後改為 eval(“data = \” “+data+” \” “);即將返回的數據用雙引號引起來當作字符串，然後賦給 data 。終於成功了。。。

貼出來，希望可以幫助到其他同樣遇到這個問題的人。

求 javascript ajaxfileupload.js

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)

{

//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’);

var oldElement = jQuery(‘#’ + fileElementId);

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 = s.fileElementId;

var form = jQuery.createUploadForm(id, s.fileElementId);

var io = jQuery.createUploadIframe(id, s.secureuri);

var frameId = ‘jUploadFrame’ + id;

var formId = ‘jUploadForm’ + id;

if( s.global ! jQuery.active++ )

{

// Watch for a new set of requests

jQuery.event.trigger( “ajaxStart” );

}

var requestDone = false;

// Create the request object

var xml = {};

if( s.global )

{

jQuery.event.trigger(“ajaxSend”, [xml, s]);

}

var uploadCallback = function(isTimeout)

{

// Wait for a response to come back

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( s.success )

{

// ifa local callback was specified, fire it and pass it the data

s.success( data, status );

};

if( s.global )

{

// Fire the global callback

jQuery.event.trigger( “ajaxSuccess”, [xml, s] );

};

} else

{

jQuery.handleError(s, xml, status);

}

} catch(e)

{

status = “error”;

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

};

if( s.global )

{

// The request was completed

jQuery.event.trigger( “ajaxComplete”, [xml, s] );

};

// Handle the global AJAX counter

if(s.global ! –jQuery.active)

{

jQuery.event.trigger(“ajaxStop”);

};

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;

};

}

// Timeout checker

if( s.timeout 0 )

{

setTimeout(function(){

if( !requestDone )

{

// Check to see ifthe request is still happening

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)

{

form.encoding = ‘multipart/form-data’;

}

else

{

form.enctype = ‘multipart/form-data’;

}

jQuery(form).submit();

} catch(e)

{

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

}

if(window.attachEvent){

document.getElementById(frameId).attachEvent(‘onload’, 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;

// ifthe type is “script”, eval it in global context

if( type == “script” )

{

jQuery.globalEval( data );

}

// Get the JavaScript object, ifJSON is used.

if( type == “json” )

{

eval( “data = ” + data );

}

// evaluate scripts within html

if( type == “html” )

{

jQuery(“div”).html(data).evalScripts();

}

return data;

}

});

這個是ajaxfileupload.js的源碼，自己建個文件，重命名就ok了.

給你發了個fileManager的php源程序,好好研究.

ajaxfileupload.js上傳文件時後台用java怎麼接收文件流

前台：ajax實現，點擊上傳，確認表單發送到後台，此時ajax做的事情，就是確認表單，這是一個偽ajax ,ajax不能實現文件上傳，可以使用一個JS,叫做ajaxfileupload.js的用法。

後台無非是接收了，沒什麼好講

java 使用 AjaxUpload.js 實現上傳文檔的時候需要注意哪些？

ajax是無法提交文件的，所以在上傳圖片並預覽的時候，我們經常使用Ifame的方法實現看似異步的效果。但是這樣總不是很方便的，AjaxFilleUpload.js對上面的方法進行了一個包裝，使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁面結構，實現異步的文件提交。

html:

複製代碼 代碼如下:

input type=”file” name=”upload” hidden=”hidden” id=”file_upload” accept=”.zip” /

js:

複製代碼 代碼如下:

$.ajaxFileUpload({

url:’${pageContext.request.contextPath}/Manage/BR_restorePic.action’, //需要鏈接到服務器地址

secureuri:false,

fileElementId:’file_upload’, //文件選擇框的id屬性

dataType: ‘text’, //服務器返回的格式，可以是json、xml

success: function (data, status) //相當於java中try語句塊的用法

{

$(‘#restoreDialog’).html(data);

//alert(data);

},

error: function (data, status, e){ //相當於java中catch語句塊的用法

$(‘#restoreDialog’).html(“上傳失敗，請重試”);

}

});

這個方法還會出現一個問題，就是input只能使用一次的問題，input第二次的onchange將不會被執行，這應該是與瀏覽器的有關，解決辦法就是替換這個input

像這樣：

複製代碼 代碼如下:

$(‘#file_upload’).replaceWith(‘input type=”file” name=”upload” hidden=”hidden” id=”file_upload” accept=”.zip” /’);