本文转载自微信公众号“大千世界”，转载请联系大千世界公众号。出于安全和隐私原因，Web应用程序无法直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以使用inputfile和FileReader来实现。在这篇文章中，我们将通过一些示例来了解它是如何工作的。文件操作流程获取文件由于浏览器中的JS无法从用户设备访问本地文件，因此我们需要提供一种方法让用户选择一个或多个文件供我们使用。这可以通过文件选择器完成。如果要允许选择多个文件，可以添加multiple属性：我们可以通过监控文件选择更改事件，还可以添加另一个UI元素，让用户明确地开始处理所选文件。输入文件有一个files属性，它是File对象的列表（可能有多个选定的文件）。File对象如下：{name:'test.txt',//所选文件的名称size:1024,//字节大小type:'text/plain',//基于文件extension假设是文件类型，这个可能不对lastModified:1234567890,//根据用户系统最新修改时间戳读取文件lastModifiedDate://最后修改时间戳的date对象}读取文件，主要用途是[FileReader][1]类。(1)该对象的属性：“FileReader.error”：只读，DOMException，表示读取文件时发生错误。“FileReader.readyState”：只读一个代表FileReader状态的数字。取值如下：“FileReader.result”：只读，文件内容。此属性仅在读取操作完成后才有效，数据的格式取决于使用哪种方法启动读取操作。(2)该对象拥有的方法：readAsText(file,encoding)：以纯文本方式读取文件，并将读取的文本保存在result属性中。第二个参数表示编码格式。readAsDataUrl(file)：读取文件，将文件以dataURI的形式保存在result属性中。readAsBinaryString(file)：读取文件并将文件保存为结果属性中的字符串。readAsArrayBuffer(file)：读取文件并在result属性中保存一个包含文件内容的ArrayBuffer。FileReader.abort()：中止读取操作。返回时，readyState属性为DONE。(3)文件读取过程是一个异步操作，这个过程中提供了三个事件：progress、error、load事件。progress：每50ms左右，会触发一个progress事件。error：无法读取文件信息时触发。load：加载成功后触发。在下面的示例中，我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。示例1：读取一个文本文件为了将文件内容显示为文本，需要重写change：document.getElementById('fileInput').addEventListener('change',functionselectedFileChanged(){if(this.files.length===0){console.log('Pleaseselectafile!');return;}constreader=newFileReader();reader.onload=functionfileReadCompleted(){//读取完成后，内容只在`reader.result`在控制台.log(reader.result);};reader.readAsText(this.files[0]);});首先，我们需要确保我们有一个可以读取的文件。如果用户在没有选择文件的情况下取消或以其他方式关闭文件选择对话框，我们将没有任何内容可读并退出该功能。然后我们继续创建一个FileReader。读取器异步工作以避免阻塞主线程和UI更新，这在读取视频等大文件时非常重要。读取器发出一个“加载”事件（例如类似于Image对象）来告诉我们的文件它已完成读取。阅读器将文件内容保存在其结果属性中。此属性中的数据取决于我们用来读取文件的方法。在我们的示例中，我们使用readAsText方法读取文件，因此结果将是一个文本字符串。示例2：显示本地选择的图像如果我们要显示图像，将文件作为字符串读取不是很有用。FileReader有一个readAsDataURL方法，该方法将文件读入编码字符串，该字符串可用作元素的源。这个例子的代码和前面的代码基本一样，不同的是我们使用readAsDataURL读取文件并将结果显示为图片：document.getElementById('fileInput').addEventListener('change',functionselectedFileChanged(){if(this.files.length===0){console.log('Nofileselected.');return;}constreader=newFileReader();reader.onload=functionfileReadCompleted(){constimg=newImage();img。src=reader.result;document.body.appendChild(img);};reader.readAsDataURL(this.files[0]);});摘要出于安全和隐私原因，JavaScript不能直接访问本地文件。您可以使用输入类型作为文件来选择文件并处理该文件。文件输入具有包含所选文件的文件属性。我们可以使用FileReader来访问所选文件的内容。原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
