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

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

先介紹一下技術參數：

頁面技術：HTML5

後台技術：Servlet 3.0

伺服器：Tomcat 7.0

腳本：JavaScript

HTML5 file元件的新屬性

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

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

<img     style="max-width:90%"  style="max-width:90%"/ alt="原生JavaScript實作非同步多檔案上傳_javascript技巧" ><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版本）

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