1. 程式人生 > >input:file 選擇多個文件 用FileReader讀取為二進制

input:file 選擇多個文件 用FileReader讀取為二進制

tails csdn type event對象 進制 調用 upload chan change

1.http://blog.csdn.net/jackfrued/article/details/8967667 關於FileReader的詳細API

2.關於<input type="file" multiple> multiple 是HTML5的新屬性,multiple屬性規定輸入字段可選擇多個值。如果使用該屬性,則字段可接受多個值。

3.用onchange事件來捕捉到選擇上傳的文件 event對象 event.target.files 這個就是你上傳文件的各種屬性 這是一個偽數組 其實是一個對象;

4.創建FileReader對象 讀取文件第一個文件的時候 new FileReader().readAsDataURL(event.target.files[0]);

5.讀取完成會觸發onload事件 在onload事件裏邊繼續調用 new FileReader().readAsDataURL(event.target.files[1]);

6.就會再次觸發onload事件 這樣直到所有的文件都被讀取完;

 function uploadMulFile(uploadFile) {
    var fileLength = 0;
     var reader = new FileReader();
     reader.readAsDataURL(uploadFile[fileLength]);
   reader.onabort = function
(e) { console.log("文件讀取異常" + uploadFile[fileLength].name); }; reader.onerror = function(e) { console.log("文件讀取出現錯誤" + uploadFile[fileLength].name); }; reader.onload = function(e) { if(e.target.result) { console.log("完成" + uploadFile[fileLength].name); fileLength
++; if(fileLength < uploadFile.length) { reader.readAsDataURL(uploadFile[fileLength]); } else { //do something } } }; }

input:file 選擇多個文件 用FileReader讀取為二進制