• 如何使用 JavaScript 读取文件

    您可以使用 JavaScript File API 加载选定文件的内容。本节介绍 File API 的基本用法。

    现在让我们看看如何使用 File API。

    使用 JavaScript 读取文件概述

    选择带有输入元素的文件

    在 HTML 中，您可以通过将 input 元素的 type 属性设置为 file 来选择文件。

    <input type="file">

    如果您想允许多个文件选择多设置属性。

    <input type="file" multiple>

    用户选择文件后改变将发生一个事件。

    处理输入元素的变化事件

    要捕获更改事件，首先：改变有一种方法可以直接在其中编写处理程序。您可以通过将其传递给 onchange 处理程序来立即在处理程序中访问输入元素，如下所示：

    1. <!DOCTYPE html>
    2. <html lang="ja">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>File Input Test</title>
    6.     <script>
    7.       function fileChanged(input) {
    8.         console.log(input);
    9.         for (let i = 0; i < input.files.length; i++) {
    10.           console.log(input.files[i]);
    11.         }
    12.       }
    13.     </script>
    14.   </head>
    15.   <body>
    16.     <input type="file" onchange="fileChanged(this)" multiple/>
    17.   </body>
    18. </html>

    您还可以动态获取输入元素来处理更改事件。

    1. <!DOCTYPE html>
    2. <html lang="ja">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>File Input Test</title>
    6.     <script>
    7.       window.addEventListener('load', () => {
    8.         const f = document.getElementById('file1');
    9.         f.addEventListener('change', evt => {
    10.           const input = evt.target;
    11.           for (let i = 0; i < input.files.length; i++) {
    12.             console.log(input.files[i]);
    13.           }
    14.         });
    15.       });
    16.     </script>
    17.   </head>
    18.   <body>
    19.     <input type="file" id="file1" multiple/>
    20.   </body>
    21. </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。

    1. <!DOCTYPE html>
    2. <html lang="ja">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>File API 1</title>
    6.     <script src="file1.js"></script>
    7.     <link href="style.css" rel="stylesheet" />
    8.   </head>
    9.   <body>
    10.     <input type="file" id="file1" />
    11.     <pre id="pre1"></pre>
    12.   </body>
    13. </html>

    输入元素的类型属性文件作为，作为一个ID文件 1已设置。

    样式表样式.css如下。我只是稍微改变了字体并添加了背景颜色，但我没有做太多。

    1. @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    2. @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
    3.  
    4. html {
    5.     font-family: 'Roboto', sans-serif;
    6. }
    7.  
    8. pre {
    9.     font-family: 'Roboto mono', monospace;
    10.     font-size: 0.9rem;
    11.     background-color: #D6EAF8;
    12.     padding: 10px;
    13. }

    JavaScript 文件file1.js如下。

    1. window.addEventListener('load', () => {
    2.   const f = document.getElementById('file1');
    3.   f.addEventListener('change', evt => {
    4.     let input = evt.target;
    5.     if (input.files.length == 0) {
    6.       console.log('No file selected');
    7.       return;
    8.     }
    9.     const file = input.files[0];
    10.     const reader = new FileReader();
    11.     reader.onload = () => {
    12.       const pre = document.getElementById('pre1');
    13.       pre.innerHTML = reader.result;
    14.     };
    15.  
    16.     reader.readAsText(file);
    17.   });
    18. });

    在窗口对象的加载事件处理程序中，设置了该文件输入元素的更改事件处理程序。

    当您进行文件选择操作时，这将调用更改事件处理程序。

    一个 Event 对象被传递给事件处理程序。执行文件选择操作的输入元素被传递给事件对象的目标属性。这个输入元素文件该属性设置为选定文件对象的列表。

    这次我们没有在 input 元素上设置 multiple 属性，所以只会设置一个 File 对象。

    拿到File对象后，接下来就是读取文件的地方了。

    1. const file = input.files[0]; 
    2. const reader = new FileReader(); 
    3. reader.onload = () => { 
    4.     const pre = document.getElementById('pre1');
    5.     pre.innerHTML = reader.result;
    6. };
    7.  
    8. reader.readAsText(file);

    这样，预文件的内容在元素中设置。

    Promise 的事件处理和使用

    好吧，在上面的代码中文件阅读器对象的 读取文本（）在调用方法之前负载我已经设置了一个事件处理程序。

    文件阅读器还有更多可用的事件，但每次设置它们然后调用它们可能有点复杂。

    所以让我们使用 Promises 来组织我们的代码。

    准备一个接收File对象的函数对象，如：

    1. const readAsTextReader = file => {
    2.   const reader = new FileReader();
    3.  
    4.   return new Promise((resolve, reject) => {
    5.     reader.onloadstart = ev => {
    6.       console.log(`onloadstart: total=${ev.loaded}/${ev.loaded}`);
    7.     };
    8.  
    9.     reader.onloadend = ev => {
    10.       console.log(`onloadend: total=${ev.loaded}/${ev.loaded}`);
    11.     };
    12.  
    13.     reader.onprogress = ev => {
    14.       console.log(`onprogress: total=${ev.loaded}/${ev.loaded}`);
    15.     };
    16.  
    17.     reader.onerror = () => {
    18.       reader.abort();
    19.       reject('Unknown error occurred during reading the file');
    20.     };
    21.  
    22.     reader.onload = () => {
    23.       console.log('onload');
    24.       resolve(reader.result);
    25.     };
    26.  
    27.     reader.readAsText(file);
    28.   });
    29. };

    这样，读取文件时的异步处理使用 Promise 的 then 和 catch，应用如下。

    1. window.addEventListener('load', () => {
    2.   const f = document.getElementById('file1');
    3.   f.addEventListener('change', evt => {
    4.     const input = evt.target;
    5.     if (input.files.length == 0) {
    6.       return;
    7.     }
    8.     const file = input.files[0];
    9.     console.log(file);
    10.  
    11.     readAsTextReader(file)
    12.       .then(value => {
    13.         const pre = document.getElementById('pre1');
    14.         pre.innerHTML = value;
    15.       })
    16.       .catch(reason => {
    17.         alert(reason);
    18.       });
    19.   });
    20. });

    简单的二进制文件查看器

    接下来，让我们创建一个简单的二进制文件查看器作为示例，不仅可以读取文本文件，还可以读取二进制文件。

     

    选择文件并使用 FileReader 读取文件的位置是相同的。

    然而，这一次readAsArrayBuffer()读取文件。结果作为 ArrayBuffer 返回。

    ArrayBuffer 是 JavaScript 中的字节字符串。有关详细信息，请参阅“使用 ArrayBuffer 处理二进制数据”。

    1. const readAsArrayBufferReader = file => {
    2.   const reader = new FileReader();
    3.  
    4.   return new Promise((resolve, reject) => {
    5.     reader.onerror = () => {
    6.       reader.abort();
    7.       reject('Unknown error occurred during reading the file');
    8.     };
    9.  
    10.     reader.onload = () => {
    11.       console.log('onload');
    12.       resolve(reader.result);
    13.     };
    14.  
    15.     reader.readAsArrayBuffer(file);
    16.   });
    17. };
    18.  
    19. window.addEventListener('load', () => {
    20.   const f = document.getElementById('file1');
    21.   f.addEventListener('change', evt => {
    22.     const input = evt.target;
    23.     if (input.files.length == 0) {
    24.       return;
    25.     }
    26.     let file = input.files[0];
    27.     console.log(file);
    28.     if (!file) {
    29.       return;
    30.     }
    31.     if (file.size > 50 * 1024) {
    32.       alert('Please select a file smaller than 50kb.');
    33.       return;
    34.     }
    35.  
    36.     readAsArrayBufferReader(file)
    37.       .then(buff => {
    38.         console.log(buff);
    39.         let s = '';
    40.         let a = new Uint8Array(buff);
    41.         for (let i = 0; i * 16 < a.length; i++) {
    42.           let line = '';
    43.           let p = i * 16;
    44.           let b = a.slice(p, Math.min(a.length, p + 16));
    45.           for (const e of b) {
    46.             let h = e
    47.               .toString(16)
    48.               .toUpperCase()
    49.               .padStart(2, '0');
    50.             line += ' ' + h;
    51.           }
    52.           let addr = p
    53.             .toString(16)
    54.             .toUpperCase()
    55.             .padStart(8, '0');
    56.           line = `${addr}:${line}\n`;
    57.           s += line;
    58.         }
    59.         let pre = document.getElementById('pre1');
    60.         pre.innerHTML = s;
    61.       })
    62.       .catch(reason => {
    63.         alert(reason);
    64.       });
    65.   });
    66. });

    这次文件大小限制为 50KB。

    从读取为 ArrayBuffer 的数据创建一个 Uint8Array 对象。从那里片（）格式化为以 16 字节为增量显示。

    到目前为止，我们已经介绍了如何在 JavaScript 中使用 File 对象和 FileReader 读取文件，如何使用 Promise 简化异步处理，以及处理二进制数据的示例。

  • 相关阅读:
    TCP/IP协议
    泡沫褪去，DeFi还剩下什么
    玩转快速排序(C语言版)
    2. NLP基础 ： 分词
    DSPE-PEG-Hydrazide，DSPE-PEG-HZ，磷脂-聚乙二醇-酰肼MW：1000
    php 递归方式 计算学生寝室分配问题 算法
    电子电路设计基本概念100问（四）【学习目标：原理图、PCB、阻抗设计、电子设计基本原则、基本原器件等】
    TEngine框架的导入与运行
    【常见相机模型】
    平芯微PW7014中文规格书
  • 原文地址：https://blog.csdn.net/allway2/article/details/125429973