快捷導(dǎo)航

使用AjaxFileUpload.js實(shí)現(xiàn)異步文件上傳示例

更新時(shí)間：2014年05月29日 15:24:47 作者：

AjaxFilleUpload.js可以使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁(yè)面結(jié)構(gòu)，實(shí)現(xiàn)異步的文件提交

ajax是無(wú)法提交文件的，所以在上傳圖片并預(yù)覽的時(shí)候，我們經(jīng)常使用Ifame的方法實(shí)現(xiàn)看似異步的效果。但是這樣總不是很方便的，AjaxFilleUpload.js對(duì)上面的方法進(jìn)行了一個(gè)包裝，使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁(yè)面結(jié)構(gòu)，實(shí)現(xiàn)異步的文件提交。

html:

復(fù)制代碼代碼如下:

 
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" /> 

js:

復(fù)制代碼代碼如下:

 
$.ajaxFileUpload({ 
url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action', //需要鏈接到服務(wù)器地址 
secureuri:false, 
fileElementId:'file_upload', //文件選擇框的id屬性 
dataType: 'text', //服務(wù)器返回的格式，可以是json、xml 
success: function (data, status) //相當(dāng)于java中try語(yǔ)句塊的用法 
{ 

$('#restoreDialog').html(data); 




//alert(data); 
}, 
error: function (data, status, e){ //相當(dāng)于java中catch語(yǔ)句塊的用法 

$('#restoreDialog').html("上傳失敗，請(qǐng)重試"); 
} 
}); 

這個(gè)方法還會(huì)出現(xiàn)一個(gè)問(wèn)題，就是input只能使用一次的問(wèn)題，input第二次的onchange將不會(huì)被執(zhí)行，這應(yīng)該是與瀏覽器的有關(guān)，解決辦法就是替換這個(gè)input

像這樣：

復(fù)制代碼代碼如下:

 
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />'); 

您可能感興趣的文章:

相關(guān)文章

如何使用ajax讀取Json中的數(shù)據(jù)
這篇文章主要介紹了如何使用ajax讀取Json中的數(shù)據(jù)，如何使用AJAX讀取Json數(shù)組里面的數(shù)據(jù)，感興趣的小伙伴們可以參考一下
2016-04-04
Ajax詳解及其案例分析
本文主要給大家詳細(xì)講解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以參考下。
2015-06-06
AJAX 請(qǐng)求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解
關(guān)于這個(gè)內(nèi)容,很多人都有所了解.但從我搜索的內(nèi)容來(lái)看,他們只是略微看一下,根本不知道里面到底是什么情況.
2011-06-06
ajax獲得json對(duì)象數(shù)組循環(huán)輸出數(shù)據(jù)的方法
今天小編就為大家分享一篇ajax獲得json對(duì)象數(shù)組循環(huán)輸出數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
原生Ajax之全面了解xhr的概念與使用
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù),在不重新加載整個(gè)頁(yè)面的情況下,通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下
2022-11-11
ajax struts2 下拉框賦值(適合所有)
此代碼適合所有下拉列表取值;一個(gè)項(xiàng)目所有的下拉列表只需要這一個(gè)公用方法，接下來(lái)為大家詳細(xì)介紹下具體實(shí)現(xiàn)步驟，感興趣的朋友可以參考下，希望可以幫助到你
2013-03-03
AJAX實(shí)現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法
下面小編就為大家?guī)?lái)一篇AJAX實(shí)現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
Ajax校驗(yàn)是否重復(fù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Ajax校驗(yàn)是否重復(fù)的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Ajax獲取數(shù)據(jù)然后顯示在頁(yè)面的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
反向Ajax 30分鐘快速掌握
這篇文章主要介紹了反向Ajax 30分鐘快速掌握的相關(guān)資料,需要的朋友可以參考下
2016-07-07