利用FileReader實現上傳圖片前本地預覽

時間 2019-11-13

標籤利用 filereader 實現上傳圖片本地預覽简体版

原文原文鏈接

引子

平時作圖片上傳預覽時若是沒有特殊的要求就直接先把圖片傳到後臺去，成功以後拿到URL再渲染到頁面上，這樣作在圖片比較小的時候沒什麼問題，大一點的話就會比較慢才能看到預覽了，並且還產生了垃圾文件，因此比較好的是上傳以前先在本地預覽一下。

以前作項找插件的時候就知道純前端能夠實現圖片本地預覽，可今天面試的時候被問到時居然一臉懵逼，而後居然無心中就在電腦桌面發現了實現的demo，而後根據demo查了一下API，稍微總結下：html

首先得拿到File對象

當用input標籤上傳圖片時event對象中會包含file對象的一個集合前端

event.target.files

核心是FileReader對象

根據MDN上的說法：面試

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容,使用 File 或 Blob 對象指定要讀取的文件或數據。異步
首先要做爲構造函數獲得一個FileReader的實例對象

var freader = new FileReader();

利用readAsDataURL()方法讀取指定的內容

freader.readAsDataURL(file);

最後就是一個事件處理，至關於監控讀取進度，咱們這裏是當讀取完成時渲染圖片，因此用onload

freader.onload = function(e) {  
     console.log(e);
     myImg.setAttribute('src', e.target.result);  
   }

這裏架加載完成以後最終獲得的是一個base64編碼的src地址，具體爲何下次查清楚了再專門寫篇關於base64編碼的文章

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
  <form action="">  
   <input type="file" name="files" id="fileTog" accept="image/*"  multiple="multiple" onchange="changImg(event)">  
   <img alt="暫無圖片" id="myImg" src="" height="100px" width="100px">  
  </form>
    
  <script>
    function changImg(e){  
      var myImg = document.getElementById('myImg');
      for (var i = 0; i < e.target.files.length; i++) {  
        var file = e.target.files[i]; 
        console.log(file); 
        if (!(/^image\/.*$/i.test(file.type))) {  
            continue; //不是圖片 就跳出這一次循環  
        }  
        //實例化FileReader API  
        var freader = new FileReader();  
        freader.readAsDataURL(file);  
        freader.onload = function(e) {  
          console.log(e);
          myImg.setAttribute('src', e.target.result);  
        }  
      }  
    }
  </script>

</body>
</html>

後記

經過這件事就暴露了我學習新東西的一個問題，就是查出來看一遍以爲知道了就好了，這種習慣是特別害人的，之後每當有個疑問查出來以後不只要查是怎麼作的，還要了解一下爲何能夠這麼作，所謂知其然知其因此然。還有就是平時的代碼能用手敲的儘可能別複製，複製一時是爽了，可要手寫的時候寫不出來也是聽尷尬的。

今天是來杭州的第三天，面試的次日，這兩天的面試中暴露出的一個重要問題就是平時太依賴搜索引擎，用腦太少，連一些簡單API就沒記全，前端確實仍是有不少東西就是要緊緊記住的，沒什麼捷徑可走，這些東西就是基礎，沒記住就是基礎差。雖然你並不影響你作出東西來，但會影響開發效率，技術要往上走，這個基石必須穩，加油記吧！函數

關於圖片上傳本地預覽的就寫到這裏了，若是有什麼我理解的不對的地方歡迎你們在評論中指出！學習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。