html5怎么读取文件_html5用FileReader API读取本地文件内容或属性【读取】

HTML5的FileReader API支持读取本地文件内容及获取基本信息：一、通过input type="file"获取File对象；二、用readAsText读取文本；三、用readAsDataURL生成Data URL预览资源；四、用readAsArrayBuffer读取二进制数据；五、直接访问File属性获取元数据。

如果您希望在网页中直接读取用户选择的本地文件内容或获取其基本信息，HTML5 提供了 FileReader API 来实现这一功能。以下是具体操作步骤：

一、使用 input type="file" 获取文件对象

FileReader 的操作起点是用户通过文件输入控件选择的 File 对象。该对象不仅包含文件内容，还携带名称、大小、类型等元数据，是后续读取操作的基础。

1、在 HTML 中添加一个带有 multiple 属性（可选）和 accept 属性（可选）的文件输入元素：。

2、通过 JavaScript 获取该元素并监听 change 事件：document.getElementById('fileInput').addEventListener('change', handleFileSelect);。

立即学习“前端免费学习笔记（深入）”；

3、在事件处理函数中，从 event.target.files[0] 提取第一个 File 对象：const file = event.target.files[0];。

二、读取文件文本内容（readAsText）

该方法将文件以指定字符编码解析为字符串，适用于纯文本类文件（如 .txt、.json、.csv、.html 等），默认编码为 UTF-8。

1、创建 FileReader 实例：const reader = new FileReader();。

移动端无限滚动加载瀑布流

里面有2个文件夹。其中这个文件名是:finishing，是我项目还没有请求后台的数据的模拟写法。请求后台数据之后，瀑布流的js有一点点变化，放在文件名是：finished。变化在于需要穿参数到后台，和填充的内容都用后台的数据填充。看自己项目需求来。由于chrome模拟器是不允许读取本地文件json的，所以如果你要进行测试，在hbuilder打开项目就可以看到效果啦，或者是火狐浏览器。

93

查看详情

2、为 reader 设置 onload 事件处理程序，在其中访问 reader.result 获取解析后的文本字符串。

3、调用 reader.readAsText(file, 'UTF-8'); 启动异步读取。

三、读取文件为 Data URL（readAsDataURL）

该方法将文件内容编码为 base64 格式的 Data URL 字符串，常用于预览图片、音频或二进制资源，无需服务器中转即可在页面中直接渲染。

1、创建 FileReader 实例：const reader = new FileReader();。

2、监听 onload 事件，将 reader.result 赋值给 img 元素的 src 属性或 video/audio 的 src 属性。

3、调用 reader.readAsDataURL(file); 开始读取。

四、读取文件为 ArrayBuffer（readAsArrayBuffer）

该方法将文件原始字节流读取为 ArrayBuffer，适用于需要底层二进制处理的场景，例如解析图像头信息、加密解密、WebAssembly 数据加载等。

1、创建 FileReader 实例：const reader = new FileReader();。

2、监听 onload 事件，从 reader.result 获取 ArrayBuffer 对象。

3、调用 reader.readAsArrayBuffer(file); 启动读取。

五、仅获取文件属性而不读取内容

File 对象本身即继承自 Blob，具备 name、size、type、lastModified 等只读属性，无需 FileReader 即可直接访问，适合快速校验或显示文件信息。

1、从 input 元素获取 File 对象后，直接读取其属性：file.name 获取文件名。

2、使用 file.size 获取字节数，file.type 获取 MIME 类型（可能为空字符串）。

3、通过 file.lastModified 获取最后修改时间戳，可用 new Date(file.lastModified) 转为可读日期。

以上就是html5怎么读取文件_html5用FileReader API读取本地文件内容或属性【读取】的详细内容，更多请关注php中文网其它相关文章！