使用AjaxFileUpload.js實現(xiàn)異步文件上傳示例
更新時間：2014年05月29日 15:24:47 作者：
AjaxFilleUpload.js可以使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁面結(jié)構(gòu)，實現(xiàn)異步的文件提交
ajax是無法提交文件的，所以在上傳圖片并預(yù)覽的時候，我們經(jīng)常使用Ifame的方法實現(xiàn)看似異步的效果。但是這樣總不是很方便的，AjaxFilleUpload.js對上面的方法進行了一個包裝，使得我們不用去管理Iframe的一系列操作，也不用影響我們的頁面結(jié)構(gòu)，實現(xiàn)異步的文件提交。
html:
<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />
js:
$.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) //相當于java中try語句塊的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相當于java中catch語句塊的用法
$('#restoreDialog').html("上傳失敗，請重試");
}
});
這個方法還會出現(xiàn)一個問題，就是input只能使用一次的問題，input第二次的onchange將不會被執(zhí)行，這應(yīng)該是與瀏覽器的有關(guān)，解決辦法就是替換這個input
像這樣：
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
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) //相當于java中try語句塊的用法
{
$('#restoreDialog').html(data);
//alert(data);
},
error: function (data, status, e){ //相當于java中catch語句塊的用法
$('#restoreDialog').html("上傳失敗，請重試");
}
});
這個方法還會出現(xiàn)一個問題，就是input只能使用一次的問題，input第二次的onchange將不會被執(zhí)行，這應(yīng)該是與瀏覽器的有關(guān)，解決辦法就是替換這個input
像這樣：
復(fù)制代碼 代碼如下:
$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');
您可能感興趣的文章:
- SpringMVC結(jié)合ajaxfileupload.js實現(xiàn)文件無刷新上傳
- 使用ajaxfileupload.js實現(xiàn)上傳文件功能
- jQuery插件ajaxfileupload.js實現(xiàn)上傳文件
- js ajaxfileupload.js上傳報錯的解決方法
- JQuery插件ajaxfileupload.js異步上傳文件實例
- asp.net+ajaxfileupload.js 實現(xiàn)文件異步上傳代碼分享
- ajaxFileUpload.js插件支持多文件上傳的方法
- 使用ajaxfileupload.js實現(xiàn)ajax上傳文件php版
- 一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
- AjaxUpLoad.js實現(xiàn)文件上傳功能
相關(guān)文章
這篇文章主要介紹了如何使用ajax讀取Json中的數(shù)據(jù)，如何使用AJAX讀取Json數(shù)組里面的數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-04-04
本文主要給大家詳細講解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以參考下。2015-06-06![AJAX 請求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解](http://img.jbzj.com/images/xgimg/bcimg2.png)
AJAX 請求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解
關(guān)于這個內(nèi)容,很多人都有所了解.但從我搜索的內(nèi)容來看,他們只是略微看一下,根本不知道里面到底是什么情況.2011-06-06
ajax獲得json對象數(shù)組 循環(huán)輸出數(shù)據(jù)的方法
今天小編就為大家分享一篇ajax獲得json對象數(shù)組 循環(huán)輸出數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù),在不重新加載整個頁面的情況下,通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于原生Ajax之全面了解xhr的概念與使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
此代碼適合所有下拉列表取值;一個項目所有的下拉列表只需要這一個公用方法，接下來為大家詳細介紹下具體實現(xiàn)步驟，感興趣的朋友可以參考下，希望可以幫助到你2013-03-03
AJAX實現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法
下面小編就為大家?guī)硪黄狝JAX實現(xiàn)圖片預(yù)覽與上傳及生成縮略圖的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了Ajax校驗是否重復(fù)的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Ajax獲取數(shù)據(jù)然后顯示在頁面的實現(xiàn)方法
下面小編就為大家?guī)硪黄狝jax獲取數(shù)據(jù)然后顯示在頁面的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了反向Ajax 30分鐘快速掌握的相關(guān)資料,需要的朋友可以參考下2016-07-07