教你如何使用?JavaScript?讀取文件

更新時(shí)間：2022年06月28日 09:53:14 作者：allway2

這篇文章主要介紹了如何使用?JavaScript?讀取文件,您可以使用?JavaScript?File?API?加載選定文件的內(nèi)容，本節(jié)介紹?File?API?的基本用法，需要的朋友可以參考下

使用 JavaScript 讀取文件概述

選擇帶有輸入元素的文件

在 HTML 中，您可以通過將 input 元素的 type 屬性設(shè)置為 file 來選擇文件。

<input type="file">

如果您想允許多個(gè)文件選擇多設(shè)置屬性。

<input type="file" multiple>

用戶選擇文件后改變將發(fā)生一個(gè)事件。

處理輸入元素的變化事件

要捕獲更改事件，首先：改變有一種方法可以直接在其中編寫處理程序。您可以通過將其傳遞給 onchange 處理程序來立即在處理程序中訪問輸入元素，如下所示：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File Input Test</title>
    <script>
      function fileChanged(input) {
        console.log(input);
        for (let i = 0; i < input.files.length; i++) {
          console.log(input.files[i]);
        }
      }
    </script>
  </head>
  <body>
    <input type="file" onchange="fileChanged(this)" multiple/>
  </body>
</html>

您還可以動(dòng)態(tài)獲取輸入元素來處理更改事件。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File Input Test</title>
    <script>
      window.addEventListener('load', () => {
        const f = document.getElementById('file1');
        f.addEventListener('change', evt => {
          const input = evt.target;
          for (let i = 0; i < input.files.length; i++) {
            console.log(input.files[i]);
          }
        });
      });
    </script>
  </head>
  <body>
    <input type="file" id="file1" multiple/>
  </body>
</html>

在這種情況下，輸入元素被傳遞給事件對(duì)象的目標(biāo)屬性。

從輸入元素的 files 屬性中獲取一個(gè) File 對(duì)象

當(dāng)更改事件發(fā)生時(shí)，輸入元素的 files 屬性將傳遞一個(gè) File 對(duì)象，該對(duì)象表示所選文件。

如果您顯示文件選擇屏幕一次并按下取消按鈕而不選擇文件，將調(diào)用更改事件處理程序，但文件屬性將是一個(gè)長度為 0 的數(shù)組。

您可以將 File 對(duì)象保存在某處并稍后使用。

使用 FileReader 讀取 File 對(duì)象

您可以使用 FileReader 對(duì)象來讀取 File 對(duì)象的內(nèi)容。通過將 File 對(duì)象傳遞給 FileReader 對(duì)象的讀取文件的方法來開始讀取。

讀取文件的方法有以下幾種。

readAsText()
readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()

FileReader 對(duì)象讀取 Blob 中的數(shù)據(jù)。File 對(duì)象也是一個(gè) Blob，因?yàn)樗菑?Blob 派生的。

當(dāng) FileReader 對(duì)象加載文件時(shí)，會(huì)調(diào)用 onload 事件。讀取結(jié)果在 FileReader 對(duì)象的 result 屬性中設(shè)置。

讀取文本（）讀取后，字符串設(shè)置在結(jié)果中，readAsArrayBuffer()讀取后，結(jié)果將設(shè)置為 ArrayBuffer 對(duì)象。

現(xiàn)在讓我們看看如何實(shí)際讀取文件。

讀取文件示例

讀取和顯示所選文件的示例

在這里，我們將制作一個(gè)行為如下的示例。

選擇文件后，將顯示所選文件的內(nèi)容。

顯示在此操作檢查中使用的 HTML 文件和樣式表的內(nèi)容。

HTML文件如下：請(qǐng)另存為file1.html。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>File API 1</title>
    <script src="file1.js"></script>
    <link href="style.css" rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    <input type="file" id="file1" />
    <pre id="pre1"></pre>
  </body>
</html>

輸入元素的類型屬性文件作為，作為一個(gè)ID文件 1已設(shè)置。

樣式表樣式.css如下。我只是稍微改變了字體并添加了背景顏色，但我沒有做太多。

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
 
html {
    font-family: 'Roboto', sans-serif;
}
 
pre {
    font-family: 'Roboto mono', monospace;
    font-size: 0.9rem;
    background-color: #D6EAF8;
    padding: 10px;
}

JavaScript 文件file1.js如下。

window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    let input = evt.target;
    if (input.files.length == 0) {
      console.log('No file selected');
      return;
    }
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      const pre = document.getElementById('pre1');
      pre.innerHTML = reader.result;
    };
 
    reader.readAsText(file);
  });
});

在窗口對(duì)象的加載事件處理程序中，設(shè)置了該文件輸入元素的更改事件處理程序。

當(dāng)您進(jìn)行文件選擇操作時(shí)，這將調(diào)用更改事件處理程序。

一個(gè) Event 對(duì)象被傳遞給事件處理程序。執(zhí)行文件選擇操作的輸入元素被傳遞給事件對(duì)象的目標(biāo)屬性。這個(gè)輸入元素文件該屬性設(shè)置為選定文件對(duì)象的列表。

這次我們沒有在 input 元素上設(shè)置 multiple 屬性，所以只會(huì)設(shè)置一個(gè) File 對(duì)象。

拿到File對(duì)象后，接下來就是讀取文件的地方了。

const file = input.files[0]; 
const reader = new FileReader(); 
reader.onload = () => { 
    const pre = document.getElementById('pre1');
    pre.innerHTML = reader.result;
};
 
reader.readAsText(file);

這樣，預(yù)文件的內(nèi)容在元素中設(shè)置。

Promise 的事件處理和使用

好吧，在上面的代碼中文件閱讀器對(duì)象的讀取文本（）在調(diào)用方法之前負(fù)載我已經(jīng)設(shè)置了一個(gè)事件處理程序。

文件閱讀器還有更多可用的事件，但每次設(shè)置它們?nèi)缓笳{(diào)用它們可能有點(diǎn)復(fù)雜。

所以讓我們使用 Promises 來組織我們的代碼。

準(zhǔn)備一個(gè)接收File對(duì)象的函數(shù)對(duì)象，如：

const readAsTextReader = file => {
  const reader = new FileReader();
 
  return new Promise((resolve, reject) => {
    reader.onloadstart = ev => {
      console.log(`onloadstart: total=${ev.loaded}/${ev.loaded}`);
    };
 
    reader.onloadend = ev => {
      console.log(`onloadend: total=${ev.loaded}/${ev.loaded}`);
    };
 
    reader.onprogress = ev => {
      console.log(`onprogress: total=${ev.loaded}/${ev.loaded}`);
    };
 
    reader.onerror = () => {
      reader.abort();
      reject('Unknown error occurred during reading the file');
    };
 
    reader.onload = () => {
      console.log('onload');
      resolve(reader.result);
    };
 
    reader.readAsText(file);
  });
};

這樣，讀取文件時(shí)的異步處理使用 Promise 的 then 和 catch，應(yīng)用如下。

window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    const input = evt.target;
    if (input.files.length == 0) {
      return;
    }
    const file = input.files[0];
    console.log(file);
 
    readAsTextReader(file)
      .then(value => {
        const pre = document.getElementById('pre1');
        pre.innerHTML = value;
      })
      .catch(reason => {
        alert(reason);
      });
  });
});

簡單的二進(jìn)制文件查看器

接下來，讓我們創(chuàng)建一個(gè)簡單的二進(jìn)制文件查看器作為示例，不僅可以讀取文本文件，還可以讀取二進(jìn)制文件。

選擇文件并使用 FileReader 讀取文件的位置是相同的。

然而，這一次readAsArrayBuffer()讀取文件。結(jié)果作為 ArrayBuffer 返回。

ArrayBuffer 是 JavaScript 中的字節(jié)字符串。有關(guān)詳細(xì)信息，請(qǐng)參閱“使用 ArrayBuffer 處理二進(jìn)制數(shù)據(jù)”。

const readAsArrayBufferReader = file => {
  const reader = new FileReader();
 
  return new Promise((resolve, reject) => {
    reader.onerror = () => {
      reader.abort();
      reject('Unknown error occurred during reading the file');
    };
 
    reader.onload = () => {
      console.log('onload');
      resolve(reader.result);
    };
 
    reader.readAsArrayBuffer(file);
  });
};
 
window.addEventListener('load', () => {
  const f = document.getElementById('file1');
  f.addEventListener('change', evt => {
    const input = evt.target;
    if (input.files.length == 0) {
      return;
    }
    let file = input.files[0];
    console.log(file);
    if (!file) {
      return;
    }
    if (file.size > 50 * 1024) {
      alert('Please select a file smaller than 50kb.');
      return;
    }
 
    readAsArrayBufferReader(file)
      .then(buff => {
        console.log(buff);
        let s = '';
        let a = new Uint8Array(buff);
        for (let i = 0; i * 16 < a.length; i++) {
          let line = '';
          let p = i * 16;
          let b = a.slice(p, Math.min(a.length, p + 16));
          for (const e of b) {
            let h = e
              .toString(16)
              .toUpperCase()
              .padStart(2, '0');
            line += ' ' + h;
          }
          let addr = p
            .toString(16)
            .toUpperCase()
            .padStart(8, '0');
          line = `${addr}:${line}\n`;
          s += line;
        }
        let pre = document.getElementById('pre1');
        pre.innerHTML = s;
      })
      .catch(reason => {
        alert(reason);
      });
  });
});

這次文件大小限制為 50KB。

從讀取為 ArrayBuffer 的數(shù)據(jù)創(chuàng)建一個(gè) Uint8Array 對(duì)象。從那里片（）格式化為以 16 字節(jié)為增量顯示。

到目前為止，我們已經(jīng)介紹了如何在 JavaScript 中使用 File 對(duì)象和 FileReader 讀取文件，如何使用 Promise 簡化異步處理，以及處理二進(jìn)制數(shù)據(jù)的示例。

到此這篇關(guān)于如何使用 JavaScript 讀取文件的文章就介紹到這了,更多相關(guān)js讀取文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: