HTML5 + AJAX ( 原生JavaScript ) 異步多文件上傳

這是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上傳帶進度條 的修改版本。后台代碼不變就可以接着使用，但是腳本不再使用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: 這畢竟只是基本功能的演示示例，離公司使用的要求還相差十萬八千里，請謹慎在公司平台使用。