這是在上篇的修改版本。后臺代碼不變就可以接著使用，但是腳本不再使用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版本）
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
