js 讀取 input[type=file] 內容，直接顯示文本 | 圖片

js 讀取 input[type=file] 內容，直接顯示文本 | 圖片

這裏面就不用 jquery 了，全用原生方法

---

1. 開始以前，你須要知道的一些基礎知識

當出現 <input type="file"> 時，該元素的 value 屬性保存了用戶指定的文件的名稱，當外層有 form 表單包裹的時候，選中的文件會被添加到表單中一併上傳至服務器。

經過點擊 input[type=file] 來選取文件的時候，都會觸發該 input 的 onchange 句柄，想要顯示文件的內容，在該句柄添加方法便可

---

2. 顯示選取的文本文件的內容

html

<input type="file" id="file" onchange="handleFiles(this.files)"/>
<p id="text"></p>

js

<script>
function handleFiles(files)
{
  if(files.length){
    let file = files[0];
    let reader = new FileReader();
    reader.onload = function(){
      document.getElementById('text').innerHTML = this.result;
    };
    reader.readAsText(file);
   }
}
</script>

照上面的來，就會在 p 標籤中顯示出選擇的文本文件的內容。

下面說說具體是怎麼實現的：

1. onchange="handleFiles(this.files)

在 input 上添加這個的意思是，在用戶選擇文件的時候，調用 handleFiles() 方法，並把當前 input 上已選中的文件傳給 handleFiles() 方法。

傳遞的 this.files 是 input 這個元素上已有的屬性 files, 以下圖（ input 元素的全部屬性部分截圖），這個files 是個 FileList 對象，裏面包含已選的文件數組，因此取的時候須要用索引。

由於咱們這裏只有一個文件，因此這個文件就是 files[0]，這樣，咱們就取到了這個文件。接下來就是讀取並顯示這個文件。

2. 用 FileReader 讀取文件的內容

關於 FileReader 的詳細屬性和方法，看這裏，特別好的一個網站，全部 js 特性都很詳細
https://developer.mozilla.org...

咱們已經取到文件 files[0]，讀取這個文件的內容，須要用到 FileReader 這個對象，其方法和屬性能夠查看本文最下文。

讀取文本文件

let reader = new FileReader();
    // 新建 FileReader 對象
    
    reader.onload = function(){
        // 當 FileReader 讀取文件時候，讀取的結果會放在 FileReader.result 屬性中
      document.getElementById('text').innerHTML = this.result;
    };

    reader.readAsText(file);
    // 設置以什麼方式讀取文件，這裏以文本方式

讀取圖片並顯示

let fileReader = new FileReader();
fileReader.onload = () => {
    document.getElementById('preview').src = fileReader.result;
    // 其它跟上面是同樣的，這裏只須要指定 img 的 src 到 FileReader.result 就行了
};

fileReader.readAsDataURL(file);
// readAsDataURL 讀取出的是圖片的 base64 格式的數據，這種數據能夠直接賦值到 img 的 src 上

像這樣

---

---

---

參閱 ：FileReader 屬性和方法

屬性

FileReader.error 只讀
一個DOMException，表示在讀取文件時發生的錯誤 。

FileReader.readyState 只讀
表示FileReader狀態的數字。取值以下：

常量名	值	描述
EMPTY	0	尚未加載任何數據.
LOADING	1	數據正在被加載.
DONE	2	已完成所有的讀取請求.

FileReader.result 只讀
文件的內容。該屬性僅在讀取操做完成後纔有效，數據的格式取決於使用哪一個方法來啓動讀取操做。

事件處理

FileReader.onabort
處理abort事件。該事件在讀取操做被中斷時觸發。

FileReader.onerror
處理error事件。該事件在讀取操做發生錯誤時觸發。

FileReader.onload
處理load事件。該事件在讀取操做完成時觸發。

FileReader.onloadstart
處理loadstart事件。該事件在讀取操做開始時觸發。

FileReader.onloadend
處理loadend事件。該事件在讀取操做結束時（要麼成功，要麼失敗）觸發。

FileReader.onprogress
處理progress事件。該事件在讀取Blob時觸發。
由於 FileReader 繼承自EventTarget，因此全部這些事件也能夠經過addEventListener方法使用。

---

方法

FileReader.abort()
停止讀取操做。在返回時，readyState屬性爲DONE。

FileReader.readAsArrayBuffer()
開始讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.

FileReader.readAsBinaryString()
開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。

FileReader.readAsDataURL()
開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。

FileReader.readAsText()開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。