這是在上篇的修改版本。後台程式碼不變就可以接著使用，但是腳本不再使用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版本）
以上就是本文的全部內容，希望對大家的學習有所幫助。
