原生JavaScript實現(xiàn)異步多文件上傳

更新時間：2015年12月02日 10:22:39 作者：喵了個咪的喵

這篇文章主要介紹了原生JavaScript實現(xiàn)異步多文件上傳，感興趣的小伙伴們可以參考一下

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

先介紹一下技術(shù)參數(shù)：

頁面技術(shù)：HTML5

后臺技術(shù)：Servlet 3.0

服務(wù)器：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 類型（標(biāo)準(zhǔn) MIME 類型的完整列表），如果使用的是DW開發(fā)的話，軟件本身就有提示。

如果選擇了多個文件，可以用JS做循環(huán)打印，看看文件的名稱，類型和大小,看演示代碼

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)
 }
}

既然可以循環(huán)多文件的話，就可以嘗試多文件上傳了。

1、首先創(chuàng)建 XMLHttpRequest 對象

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

error：在請求發(fā)生錯誤時觸發(fā)。

　　　對應(yīng)上傳時發(fā)生錯誤導(dǎo)致的上傳失敗：uploadFailed()

//上傳失敗
function uploadFailed(evt) {
 alert("上傳失敗");
}
　　progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。

　　　　　　對應(yīng)上傳進(jìn)度方法：onprogress()
/**
 * 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執(zhí)行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已經(jīng)上傳大小情況 
 var tot = evt.total;       //附件總大小 
 var per = Math.floor(100*loaded/tot);   //已經(jīng)上傳的百分比 
　 $("#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] );
 }

 //監(jiān)聽事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//發(fā)送文件和表單自定義參數(shù)
 xhr.open("POST", "upload");
 //記得加入上傳數(shù)據(jù)formData
　　 xhr.send(formData);
}

PS: 這畢竟只是基本功能的演示示例，離公司使用的要求還相差十萬八千里，請謹(jǐn)慎在公司平臺使用。

大家可以結(jié)合這篇文章進(jìn)行學(xué)習(xí)：基于HTML5 Ajax文件上傳進(jìn)度條如何實現(xiàn)（jquery版本）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: