H5 新特性之 fileReader 實現本地圖片視頻資源的預覽

大家好 !!  又見面了， 今天我們來搞一搞   H5的新增API    FileReader     真是一個超級超級方便的API呢！！！很多場景都可以使用..........

我們先不贅述MDN文檔里的內容， 我們從  1  到  0， 從 一個 小Demo 入手 開始 瞭解 它；

請開始你的表演：

是不是簡單又炫酷， 我們從頭開始來看， 界面分三個部分

1   文件input框

2    預覽部分

3   進度條

HTML代碼：

 1 <div class="file-preview">
 2     <div class="add" style="width: 50px;height: 50px;line-height: 50px;text-align: center;background-color: #eeeeee;position: relative;" >
 3         +
 4         <input type="file" id="fileInput" style="opacity: 0;z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;">
 5     </div>

 6     <div class="image-box" style="margin-top: 20px;height: 200px;line-height: 0">
 7         <img src="" alt="" style="max-height: 200px;display: none" id="image">
 8         <video src="" controls style="display: none;" height="200"></video>
 9     </div>

10     <div class="progress" style="background-color: #cccccc;width: 700px;height: 20px;position: relative;text-align: center;line-height: 20px;margin-top: 20px;">
11         <span id="percent">0%</span>
12         <div class="loading" style="position: absolute;height: 100%;background-color: blue;top: 0;left: 0;"></div>
13     </div>
14 </div>

HTML結構應該很清晰吧，  我們重點講js部分

First      獲取要操作的Dom元素

 1 var img = document.querySelector('#image');   // 獲取image
 2 
 3 var video = document.querySelector('video');  //  獲取video
 4 
 5 var input = document.querySelector('#fileInput'); // 獲取input
 6 
 7 var loading = document.querySelector('.loading'); // 獲取進度條
 8 
 9 var percent = document.querySelector('#percent'); // 獲取百分比
10 
11 var reader = new FileReader(); // 初始化一個 FileReader
12 
13 var file = {}; // 文件對象
14 
15 var fileType = ''; //  文件類型

Second    監聽input 上的change事件   ，  獲取選擇的本地文件     

 1 input.addEventListener('change', function(event) {
 2     file = event.target.files[0];    // 獲取文件對象
 3     video.style.display = 'none';   // 隱藏video
 4     img.style.display = 'none';     //  隱藏image
 5     percent.innerHTML = '0%';       //  初始化百分比
 6     loading.style.width = '0px';    //  初始化進度條
 7     if (event.target.files.length) {
 8         fileType = file.type.split('/')[0];  // 獲取文件類型
 9         reader.readAsDataURL(file);   // 開始讀取文件
10     }
11 });

　fileReader 上  　readAsDataURL() 方法是把文件 轉換成 一個 base64編碼的字元串，可以放在圖片或者視頻的src里， 最常用

　　　　　　　　readAsText()  把文件 轉換成 一個特定編碼格式的字元串， 沒有指定編碼格式預設為utf-8  常用

　　　　　　　　readAsBinaryString()  把文件 轉化成一個二進位數據  瞭解即可

　　　　　　　　readAsArrayBuffer() 把文件 轉換成一個 ArrayBuffer 數據  瞭解即可

　這些方法轉換後的數據都在FileReader.result上    ，還有一個終止讀取的方法   abort（）

　　繼續正題.................

Third    文件開始讀取後    FileRead 給我們提供了   讀取   狀態  的 事件    ， 我們綁定這些事件來看看效果：

 1 reader.onabort = function (e) {   // 終止讀取觸發     abort()方法會觸發它
 2     console.log('abort')
 3 };
 4 
 5 reader.onloadstart = function (e) {  // 開始讀取觸發
 6     console.log('start')
 7 };
 8 
 9 reader.onprogress = function (e) {  // 讀取過程觸發  可以獲得讀取進度
10 
11     percent.innerHTML = (e.loaded/e.total).toFixed(2) * 100 + '%';  // 進度百分比
12 
13     loading.style.width = (e.loaded/e.total) * 700 + 'px';   // 進度百分比 乘  總寬度  等於  進度條的寬度
14 };
15 
16 reader.onload = function (e) {   // 讀取結束並且讀取成功觸發  在這裡可以拿到result
17     console.log('loaded');
18     loading.style.width = '700px';   // 進度條完成
19     percent.innerHTML = '100%';     // 百分比完成
20     if (fileType === 'video') {
21         video.src = this.result;
22         video.style.display = 'block'   // 顯示視頻
23     } else if (fileType === 'image'){
24         img.src = this.result;
25         img.style.display = 'block'  // 顯示圖片
26     }
27 };
28 
29 reader.onloadend = function (e) {  // 讀取結束觸發 ， 在load之後
30     console.log('end')
31 };

 這裡要註意一點，  load 是讀取成功觸發，   loadend 不管讀取成功或者失敗都會觸發，

所以我們在load  里拿到轉化結果。

到此   demo  就做完啦！！！！！！！

同學們學會了嗎，

最後提一嘴，  雖然FileReader 很好用     ，  但是  ————————————

————————   base64轉碼很費時間， 如果文件非常大的話， 很慢。。。。。

還有可能轉不出來。。。。。

這種情況  推薦使用    URL.createObjectURL（file）創建一個DOMString, 直接使用這個DOMString 就好啦，

使用完記得 使用   URL.revokeObjectURL()   清掉 

本期講解到此結束， 我們下期再見  。