這篇文章是這個分類下的第四篇隨筆了，之前可能對檔案上傳還不是很清晰，寫到這篇，也就明白套路了。

ps：這就是寫部落格的好處。

第一步：定義一個input標籤type="file"

覺得 <input/> 樣式難看又難改的，請看一下這個分類下的第三篇隨筆。

第二步：定義一個 getFiles 的方法，讀取上傳的檔案。

  getFiles = (files) => {
    const textInner 
 
= document.getElementById("textInner"); // 獲取一個標籤，把讀取的內容插進去
    if (files.length) {
      var file = files[0];
      var reader = new FileReader(); // new一個FileReader例項
      console.log(reader, file)
      if (/text+/.test(file.type)) { // 判斷檔案型別，是不是text型別
        reader.onload = function () {
          textInner.innerText 
 
= this.result
        }
        reader.readAsText(file);
      } else if (/image+/.test(file.type)) { // 判斷檔案是不是imgage型別
        reader.onload = function () {
          textInner.innerHTML = '<img src="' + this.result + '"/>'
        }
        reader.readAsDataURL(file);
      }
    }
  }

到這裡，讀取檔案就結束了，下面來了解一下 html5 的FileReader 物件及其屬性

FileReader介面的方法：

相關事件：

onabort 中斷
onerror 出錯
onloadstart 　 開始
onprogress 正在讀取
onload 成功讀取
onloadend 讀取完成，無論成功失敗

檔案一旦開始讀取，無論成功或失敗，例項的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果。

如果讀取檔案過大的話fileReader允許分段讀取檔案；

var blob_file;
if(file.webkitSlice) {  //chrome
        blob_file= file.webkitSlice(start, end + 1, 'text/plain;charset=UTF-8');
} else if(file.mozSlice) { //Firefox
        blob_file= file.mozSlice(start, end + 1, 'text/plain;charset=UTF-8');
}

順便嘮叨一下base64編碼的優缺點：

優點：

　　1.減少了http請求。

　　2.沒有跨域的問題。

　　3.直接放在路徑裡不需要清理快取。

缺點：

　　1.IE6/7不支援(不過這個問題不大)；

　　2.base64本質上是將圖片以二進位制的字母展示，字元量過大無形中增加了css/html檔案的大小；

申明：此文章只供本人學習用，不做任何商業目的，部分內容來自網際網路。