在HTML5之前，通過<input type="file">一次只能上傳一個文件，大部分多文件上傳都是通過flash實現(xiàn)得（聽說得，我沒用過），但是有了HTML5，多文件上傳變得非常簡單，并且可以本地預(yù)覽。之前寫過一個模仿QQ風(fēng)格的移動端表單，支持多文件上傳（圖片），并且可以本地預(yù)覽。已放在GitHub[感興趣的點這里]，沒有維護(hù)，對它的外觀不要介意。
多文件上傳
說了這么多，多文件上傳要怎么實現(xiàn)呢？
<input type="file“ multiple >
只要加了multiple 屬性，該input就支持多文件上傳了，但是我們要怎么拿到上傳的文件呢？
HTML5提供了相應(yīng)的FileList對象，file對象有相應(yīng)的屬性，如name 、type、lastModifiedDate. 看個代碼就明白了
<input type="file" id="upload" multiple >
<script>
var Upload=document.getElementById("upload");
var formData=new FormData(); //通過FormData對象可以組裝一組用 [XMLHttpRequest]發(fā)送請求的鍵/值對,它可以更靈活方便的發(fā)送表單數(shù)據(jù)。
Upload.onchange=function(){ //onchange在你選擇完文件時觸發(fā)
var fileList=Upload.files ; //通過input的files屬性獲得fileList
for(let i=0;i<fileList.length;i++)
{
var file=fileList[i];
//比如在這里可以檢查文件類型是不是圖片
if(!/image\/w+/.test(file.type))
{
alert("請上傳圖片文件！”)；
return ;
}
formData.append("file"+i,file); //key:"file"+i,value:file,然后就可以把formData post到后臺了
console.log(file.name+file.lastModifiedDate);
}
}
</script>
效果如圖
但是要注意，多文件上傳是指你可以一次性添加多個文件，但是如果你添加了一個文件后，再次打開添加，之前的就被清空了，如果場景需要多次添加，可以每次把相關(guān)信息自己記下來，然后自己提示用戶已添加的文件。（看到這里，可能有的人說既然這樣，HTML5多文件上傳有什么意義，我本來就可以這樣一個個記下來再上傳，但是這個用戶體驗很不好，試想你微信發(fā)朋友圈，添加九張圖片，一次性添加好，還是一張張加好呢？或者你添加了幾個文件后，已經(jīng)關(guān)了，但是突然發(fā)現(xiàn)漏掉一個文件，你不總能再把之前的重新再上傳一遍吧，所以每上傳一個文件，把它記下來是很有必要的）而且時候我們不一定添加的都是同類型文件，所以一次性添加多個文件不是很方便。
本地預(yù)覽，以圖片為例
本地預(yù)覽主要依賴FileReader對象，F(xiàn)ileReader對象用于把文件讀入內(nèi)存
FileReader 對象的方法和事件
Method
- readAsBinaryString(file對象或者blob對象) 將文件讀取為二進(jìn)制
- readAsText(file對象或者blob對象) 將文件讀取為文本數(shù)據(jù)
- readAsDataURL(file對象或者blob對象) 將文件讀取為DataURL
- readAsArrayBuffer(file對象或者blob對象) 將文件讀取ArrayBuffer
- abort 中止讀取
Event
onabort 數(shù)據(jù)讀取中斷時觸發(fā)
onerror 數(shù)據(jù)讀取出錯是觸發(fā)
onloadstart 數(shù)據(jù)讀取開始時觸發(fā)
onprogress 數(shù)據(jù)讀取中
onload 數(shù)據(jù)讀取成功完成時觸發(fā)
-
onloadend 數(shù)據(jù)讀取完成時觸發(fā)，不論成功或失敗
圖像預(yù)覽示例<input type="file" accept="image/*" id="upload"> <div id="preview"></div> <script> var oPreview=document.getElementById("preview"); var oUpload=document.getElementById("upload"); oUpload.onchange=function(){ var imageFile=oUpload.files[0]; var reader=new FileReader(); reader.readAsDataURL(imageFile); reader.onload=function(e){ oPreview.innerHTML="![]("+this.result+")"; //this.result就是URL } } </script>上面的例子是本地預(yù)覽圖片，在網(wǎng)頁上通過img標(biāo)簽展示出來，同時也可以預(yù)覽文本文件等。但是本地預(yù)覽的應(yīng)用不僅僅如此，你可以在文件上傳到后臺之前，對它做任何操作，一個常見的場景就是壓縮圖片，手機(jī)拍的照片通常都在2M以上，我們往往需要提前壓縮再給后臺，這樣可以大大節(jié)省帶寬。
