前端戰五渣學前端——FileReader預覽本地文件

距離上一篇博客將近一個半月了，這一個多月有點煩躁，靜不下心來學習，也不知道爲何，玩的也不算太好，還感冒。多是天氣熱了吧，有點點躁動。上週看了《哪吒——魔童降世》還不錯，還看了新出的《蜘蛛俠：英雄遠征》，從彼得帕克身上看到了鋼鐵俠的影子，非常激動哦！

需求

爲何今天會想到寫這個預覽本地文件的博客呢，由於在工做中遇到了問題😅😅😅

1. 須要上傳圖片
2. 在圖片上傳以前，須要展現出來圖片
3. 以前的上傳圖片實現是圖片上傳成功之後返回url，而後根據url再展現圖片

這就是目前須要實現的功能。要實現這個功能，我目前感受必需要實現網頁能夠預覽本地圖片，由於圖片在展現的時候根本尚未上傳，並無圖片地址這一說

網上一搜，果真html5的強大致現出來的，有原生API就能夠實現————FileReader。

FileReader方法

FileReader的實例擁有4個方法，其中3個是用來讀取文件，另外一個是用來中斷讀取（目前我沒有用過這個方法😃沒有需求~）。咱們須要注意的是無論讀取成功或者失敗，這幾個方法都不會直接返回讀取結果，而是在result屬性中（後面會提到）

1. abort方法，參數none，終端讀取
2. readAsBinaryString方法，參數file，將文件讀取爲二進制碼
3. readAsDataURL方法，參數file，將文件讀取爲DataURL
4. readAsText方法，參數file, [encoding]，將文件讀取爲文本

readAsText： 該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。

readAsBinaryString： 該方法將文件讀取爲二進制字符串，一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件。（下面沒用到。。。尷尬。。）

readAsDataURL： 該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件一般是指圖像與 html 等格式的文件。（其實圖片的話就是轉成base64的格式）

FileReader事件

FileReader擁有提供了整個流程的事件模型，方便咱們在讀取文件的各個階段來進行本身想執行的方法

1. onabort，中斷時觸發
2. onerror，出錯時觸發
3. onload，文件讀取成功完成時觸發
4. onloadend，讀取完成觸發，不管成功或失敗
5. onloadstart，讀取開始時觸發
6. onprogress，讀取中

基本的流程就是呢~ onloadstart>onprogress>onload>onloadend

咱們來使用

readAsDataURL

那咱們就直接來上代碼吧⬇️

<input type="file" id="file">
<img src="" alt="" id="img">
複製代碼

咱們如今須要的就是咱們從<input type="file" id="file">這個標籤選擇的圖片在不通過請求上傳就能夠在下面的<img src="" alt="" id="img">標籤中展現出來

let reader = null; // 聲明reader變量方便後面使用

const fileNode = document.querySelector('#file'); // 獲取input標籤

fileNode.addEventListener('change', (e) => { // 爲獲取的input標籤添加事件監聽，當選擇文件之後觸發
  if (window.FileReader) { // 判斷瀏覽器中有沒有FileReader，畢竟如今不是全部瀏覽器都有FileReader
    reader = new FileReader(); // 實例化FileReader
    reader.onload = (event) => { // 設置讀取成功之後執行的方法
      document.querySelector('#img').src = event.target.result; // 前面說過，成功返回的數據再result屬性中，而後將這個設置成img標籤的src地址
    }
  } else { // 沒有FileReader的彈出警告而後返回
    alert('你的先瀏覽器沒有FileReader，不能這麼幹！');
    return;
  }
  const file = e.target.files[0]; // 拿到選擇的文件信息
  reader.readAsDataURL(file); // 將文件信息轉成DataUrl，這個就是轉成功後執行 reader.onload 方法
})
複製代碼

這樣咱們就實現了不經過上傳圖片就能夠在本地瀏覽圖片了！

至此，咱們用到了readAsDataURL方法和onload事件，下面咱們再來看一下readAsText，也就是讀取文本。

readAsText

仍是，咱們先更改html

<input type="file" id="file">
<div id="text"></div>
複製代碼

let reader = null; // 聲明reader變量方便後面使用

const fileNode = document.querySelector('#file'); // 獲取input標籤

fileNode.addEventListener('change', (e) => { // 爲獲取的input標籤添加事件監聽，當選擇文件之後觸發
  if (window.FileReader) { // 判斷瀏覽器中有沒有FileReader，畢竟如今不是全部瀏覽器都有FileReader
    reader = new FileReader(); // 實例化FileReader
    reader.onload = (event) => { // 設置讀取成功之後執行的方法
      document.querySelector('#text').innerHTML = event.target.result; // 前面說過，成功返回的數據再result屬性中，而後將拿回來的文本添加到指定標籤中
    }
  } else { // 沒有FileReader的彈出警告而後返回
    alert('你的先瀏覽器沒有FileReader，不能這麼幹！');
    return;
  }
  const file = e.target.files[0]; // 拿到選擇的文件信息
  reader.readAsText(file); // 將文件信息轉成文本，默認是UTF-8格式，這個就是轉成功後執行 reader.onload 方法
})
複製代碼

新建一個txt的文件，別的文本文件應該也好使

這樣咱們就實現了本地預覽圖片和文本的需求啦~

輕鬆一下

咱們來課堂延伸一下，就是咱們在獲取圖片的時候，實際上是轉成base64的格式，而後呈如今頁面中的，那咱們如今還有一個API可讓圖片生成一個本地的地址，而後展示出來，那就是——URL.createObjectURL()

怎麼用呢？？？讓咱們來看一下代碼

這回咱們的html有兩個img標籤，方便咱們來對比

<input type="file" id="file">
<img src="" alt="" id="img">
<img src="" alt="" id="img2">
複製代碼

let reader = null; // 聲明reader變量方便後面使用

const fileNode = document.querySelector('#file'); // 獲取input標籤

fileNode.addEventListener('change', (e) => { // 爲獲取的input標籤添加事件監聽，當選擇文件之後觸發
  if (window.FileReader) { // 判斷瀏覽器中有沒有FileReader，畢竟如今不是全部瀏覽器都有FileReader
    reader = new FileReader(); // 實例化FileReader
    reader.onload = (event) => { // 設置讀取成功之後執行的方法
      document.querySelector('#img').src = event.target.result; // 前面說過，成功返回的數據再result屬性中，而後將這個設置成img標籤的src地址
    }
  } else { // 沒有FileReader的彈出警告而後返回
    alert('你的先瀏覽器沒有FileReader，不能這麼幹！');
    return;
  }
  const file = e.target.files[0]; // 拿到選擇的文件信息

  /* 這裏是咱們用的URL.createObjectURL() */

  document.querySelector('#img2').src = URL.createObjectURL(file) // 咱們直接經過URL.createObjectURL()這個方法來把文件信息轉成一個url地址

  /* end */
  reader.readAsDataURL(file); // 將文件信息轉成DataUrl，這個就是轉成功後執行
})
複製代碼

結語

如今咱們能夠實現本地預覽圖片、文本，以及能夠生成url來預覽的需求了。

日後我還會繼續更新博客，記錄本身在學習過成功遇到的小問題，或者學習到的新技能

---

我是前端戰五渣，一個前端界的小學生。