Javascript读取本地文件

出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用 input fileFileReader 来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

文件操作的流程

①获取文件

由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用。这可以通过文件选择器 <input type='file' /> 来完成。

<input type="file">

如果想允选择多个文件,可以添加 multiple 属性:

<input type="file" multiple>

我们可以通过 change 事件来监听文件的选择,也可以添加另一个 UI 元素让用户显式地开始对所选文件的处理。

input file 具有一个files属性,该属性是File对象的列表(可能有多个选择的文件)。
在这里插入图片描述
File对象如下所示:
在这里插入图片描述
②读取文件
读取文件,主要使用的是 FileReader 类。

该对象拥有的属性

  • FileReader.error:只读,一个DOMException,表示在读取文件时发生的错误 。
  • FileReader.readyState:只读,表示 FileReader 状态的数字。取值如下:

常量名值描述
EMPTY 0 还没有加载任何数据
LOADING 1 数据正在被加载
DONE 2 已完成全部的读取请求

  • FileReader.result:只读,文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

该对象拥有的方法

  • readAsText(file, encoding):以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。
  • readAsDataUrl(file):读取文件并且将文件以数据URL的形式保存在result属性中。
  • readAsBinaryString(file):读取文件并且把文件以字符串保存在result属性中。
  • readAsArrayBuffer(file):读取文件并且将一个包含文件内容的ArrayBuffer保存在result属性中。
  • abort():中止读取操作。在返回时,readyState属性为DONE。

文件读取的过程是异步操作,在这个过程中提供了三个事件:progress、error、load事件。

  • progress:每隔50ms左右,会触发一次progress事件。
  • error:在无法读取到文件信息的条件下触发。
  • load:在成功加载后就会触发。

在下面的示例中,我们将使用readAsText和readAsDataURL方法来显示文本和图像文件的内容。

例一:读取文本文件

为了将文件内容显示为文本,change需要重写一下:
在这里插入图片描述
首先,我们要确保有一个可以读取的文件。如果用户取消或以其他方式关闭文件选择对话框而不选择文件,我们就没有什么要读取和退出函数。

然后我们继续创建一个FileReader。reader的工作是异步的,以避免阻塞主线程和 UI 更新,这在读取大文件(如视频)时非常重要。

reader发出一个 load 事件(例如,类似于Image对象),告诉我们的文件已经读取完毕。

reader将文件内容保存在其 result 属性中。此属性中的数据取决于我们使用的读取文件的方法。在我们的示例中,我们使用 readAsText 方法读取文件,因此 result 将是一个文本字符串。

例二:显示本地选择的图片
在这里插入图片描述
如果我们想要显示图像,将文件读取为字符串并不是很有用。FileReader有一个 readAsDataURL 方法,可以将文件读入一个编码的字符串,该字符串可以用作<img>元素的源。本例的代码与前面的代码基本相同,区别是我们使用 readAsDataURL 读取文件并将结果显示为图像:

总结

  • 由于安全和隐私的原因,JavaScript 不能直接访问本地文件。
  • 可以通过 input 类型为 file 来选择文件,并对文件进行处理。
  • file input 具有带有所选文件的files属性。
  • 我们可以使用FileReader来访问所选文件的内容。

【转自】JavaScript读取本地文件常用方法流程解析

  • 4
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在浏览器中,JavaScript 不能直接访问本地文件系统。但是,可以使用 HTML5 的 File API 来实现本地文件读取和写入操作。 以下是一个简单的示例代码,演示如何读取本地文件并获取其路径: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件读取示例</title> </head> <body> <input type="file" id="fileInput"> <button onclick="readFile()">读取文件</button> <script> function readFile() { var input = document.getElementById('fileInput'); var file = input.files[0]; if (file) { var reader = new FileReader(); reader.readAsText(file); reader.onload = function(e) { console.log('文件内容:', e.target.result); console.log('文件路径:', URL.createObjectURL(file)); } } } </script> </body> </html> ``` 在这个示例中,我们创建了一个 `<input>` 元素,类型为 `file`,允许用户选择本地文件。当用户选择文件后,我们通过 JavaScript 获取到文件对象,然后使用 `FileReader` 对象读取文件内容。最后,我们通过 `URL.createObjectURL()` 方法获取文件的路径。 如果要实现本地文件的写入操作,可以使用 `Blob` 对象和 `URL.createObjectURL()` 方法生成本地文件路径。例如: ```js var content = 'Hello, world!'; var blob = new Blob([content], {type: 'text/plain'}); var url = URL.createObjectURL(blob); console.log('文件路径:', url); ``` 这段代码会生成一个文本文件,内容为 `Hello, world!`,并获取文件的路径。但是需要注意的是,这个文件只存在于浏览器中,无法保存到本地文件系统中。如果需要保存到本地文件系统中,必须借助服务器端程序实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值