使用AjaxFileUpload.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" />');