原生JavaScript實現非同步多檔案上傳_javascript技巧

這是在上篇的修改版本。後台代碼不變就可以接著使用，但是指令碼不再使用jQuery了，改為原生的JavaScript 代碼，所以我們主要看JS代碼。

先介紹一下技術參數：

頁面技術：HTML5

後台技術：Servlet 3.0

伺服器：Tomcat 7.0

指令碼：JavaScript

HTML5 file組件的新屬性

accept : 如果在file組件中增加這個屬性就可以直接控制上傳的檔案類型了，實在是很方便。

multiple：是否允許選擇多個檔案
HTML5 頁面代碼修改後

<img width="400" height="250"/><br /><input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/><input type="button" value="上傳圖片" onclick="uploadFile()" /><br /><div id="parent">　　<div id="son"></div></div>

accept 的值可以參閱：IANA MIME 類型（標準 MIME 類型的完整列表），如果使用的是DW開發的話，軟體本身就有提示。

如果選擇了多個檔案，可以用JS做迴圈列印，看看檔案的名稱，類型和大小,看示範代碼

function printFileInfo(){  var picFile = document.getElementById("pic");  var files = picFile.files; for(var i=0; i<files.length; i++){  var file = files[i];  var div = document.createElement("div")  div.innerHTML = "第("+ (i+1) +") 個檔案的名字："+ file.name +  " , 檔案類型："+ file.type +" , 檔案大小:"+ file.size   document.body.appendChild( div) }}

既然可以迴圈多檔案的話，就可以嘗試多檔案上傳了。

1、首先建立 XMLHttpRequest 對象

//這是全域變數。因為是樣本，所以就沒有判斷瀏覽器類型，低版本IE這麼寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) ， 這次實現 progress 和 error 2個事件

error：在請求發生錯誤時觸發。

　　　對應上傳時發生錯誤導致的上傳失敗：uploadFailed()

//上傳失敗function uploadFailed(evt) { alert("上傳失敗");}　　progress：在接收相應期間持續不斷觸發。　　　　　　對應上傳進度方法：onprogress()/** * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次 */function onprogress(evt){　var loaded = evt.loaded;       //已經上傳大小情況  var tot = evt.total;       //附件總大小  var per = Math.floor(100*loaded/tot);   //已經上傳的百分比 　 $("#son").html( per +"%" ); $("#son").css("width" , per +"%");}

最後就是上傳方法了，注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。

 //上傳檔案function uploadFile() {　　//將上傳的多個檔案放入formData中 var picFileList = $("#pic").get(0).files; var formData = new FormData(); for(var i=0; i< picFileList.length; i++){  formData.append("file" , picFileList[i] ); } //監聽事件 xhr.upload.addEventListener("progress", onprogress, false); xhr.addEventListener("error", uploadFailed, false);//傳送檔案和表單自訂參數 xhr.open("POST", "upload"); //記得加入上傳資料formData　　 xhr.send(formData);} 

PS: 這畢竟只是準系統的示範樣本，離公司使用的要求還相差十萬八千裡，請謹慎在公司平台使用。

大家可以結合這篇文章進行學習：基於HTML5 Ajax檔案上傳進度條如何?（jquery版本）

以上就是本文的全部內容，希望對大家的學習有所協助。