javascript
如何使用 JavaScript 读取文件
您可以使用 JavaScript File API 加載選定文件的內容。本節介紹 File API 的基本用法。
現在讓我們看看如何使用 File API。
使用 JavaScript 讀取文件概述
選擇帶有輸入元素的文件
在 HTML 中，您可以通過將 input 元素的 type 屬性設置為 file 來選擇文件。
<input type="file">如果您想允許多個文件選擇多設置屬性。
<input type="file" multiple>用戶選擇文件后改變將發生一個事件。
處理輸入元素的變化事件
要捕獲更改事件，首先：改變有一種方法可以直接在其中編寫處理程序。您可以通過將其傳遞給 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>您還可以動態獲取輸入元素來處理更改事件。
<!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>在這種情況下，輸入元素被傳遞給事件對象的目標屬性。
從輸入元素的 files 屬性中獲取一個 File 對象
當更改事件發生時，輸入元素的 files 屬性將傳遞一個 File 對象，該對象表示所選文件。
如果您顯示文件選擇屏幕一次并按下取消按鈕而不選擇文件，將調用更改事件處理程序，但文件屬性將是一個長度為 0 的數組。
您可以將 File 對象保存在某處并稍后使用。
使用 FileReader 讀取 File 對象
您可以使用 FileReader 對象來讀取 File 對象的內容。通過將 File 對象傳遞給 FileReader 對象的讀取文件的方法來開始讀取。
讀取文件的方法有以下幾種。
- readAsText()
- readAsArrayBuffer()
- readAsBinaryString()
- readAsDataURL()
FileReader 對象讀取 Blob 中的數據。File 對象也是一個 Blob，因為它是從 Blob 派生的。
當 FileReader 對象加載文件時，會調用 onload 事件。讀取結果在 FileReader 對象的 result 屬性中設置。
讀取文本（）讀取后，字符串設置在結果中，readAsArrayBuffer()讀取后，結果將設置為 ArrayBuffer 對象。
現在讓我們看看如何實際讀取文件。
讀取文件示例
讀取和顯示所選文件的示例
在這里，我們將制作一個行為如下的示例。
選擇文件后，將顯示所選文件的內容。
顯示在此操作檢查中使用的 HTML 文件和樣式表的內容。
HTML文件如下：請另存為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="stylesheet" /></head><body><input type="file" id="file1" /><pre id="pre1"></pre></body> </html>輸入元素的類型屬性文件作為，作為一個ID文件 1已設置。
樣式表樣式.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);}); });在窗口對象的加載事件處理程序中，設置了該文件輸入元素的更改事件處理程序。
當您進行文件選擇操作時，這將調用更改事件處理程序。
一個 Event 對象被傳遞給事件處理程序。執行文件選擇操作的輸入元素被傳遞給事件對象的目標屬性。這個輸入元素文件該屬性設置為選定文件對象的列表。
這次我們沒有在 input 元素上設置 multiple 屬性，所以只會設置一個 File 對象。
拿到File對象后，接下來就是讀取文件的地方了。
const file = input.files[0]; const reader = new FileReader(); reader.onload = () => { const pre = document.getElementById('pre1');pre.innerHTML = reader.result; };reader.readAsText(file);這樣，預文件的內容在元素中設置。
Promise 的事件處理和使用
好吧，在上面的代碼中文件閱讀器對象的?讀取文本（）在調用方法之前負載我已經設置了一個事件處理程序。
文件閱讀器還有更多可用的事件，但每次設置它們然后調用它們可能有點復雜。
所以讓我們使用 Promises 來組織我們的代碼。
準備一個接收File對象的函數對象，如：
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);}); };這樣，讀取文件時的異步處理使用 Promise 的 then 和 catch，應用如下。
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);});}); });簡單的二進制文件查看器
接下來，讓我們創建一個簡單的二進制文件查看器作為示例，不僅可以讀取文本文件，還可以讀取二進制文件。
?
選擇文件并使用 FileReader 讀取文件的位置是相同的。
然而，這一次readAsArrayBuffer()讀取文件。結果作為 ArrayBuffer 返回。
ArrayBuffer 是 JavaScript 中的字節字符串。有關詳細信息，請參閱“使用 ArrayBuffer 處理二進制數據”。
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 的數據創建一個 Uint8Array 對象。從那里片（）格式化為以 16 字節為增量顯示。
到目前為止，我們已經介紹了如何在 JavaScript 中使用 File 對象和 FileReader 讀取文件，如何使用 Promise 簡化異步處理，以及處理二進制數據的示例。
總結
以上是生活随笔為你收集整理的如何使用 JavaScript 读取文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： FFLIb Demo CQRS
- 下一篇： 通过jQuery源码学习javascri