如何操作文件_javascript中file api怎么用？

JavaScript File API 用于浏览器端读取处理用户选择的本地文件，核心是通过 input.files 获取 FileList 对象和 FileReader 异步读取文件内容，支持文本、DataURL、ArrayBuffer 等多种解析方式。

JavaScript 中的 File API 主要用来读取、处理用户通过 `` 选择的本地文件，不涉及服务器上传（那是 FormData 或 fetch 的事），核心是浏览器端的文件读取与解析。

获取文件对象：从 input 元素开始

用户选中文件后，input.files 返回一个 FileList 对象（类似数组），每个项都是 File 实例，它继承自 Blob，所以具备 size、type、name、lastModified 等属性。

• 监听 change 事件，避免用 click —— 用户可能取消选择，change 只在真正选中后触发
• input.files[0] 是最常用方式，多文件可遍历 input.files
• 注意：不能直接给 input.files 赋值（出于安全限制），它是只读的

用 FileReader 异步读取文件内容

FileReader 是操作 File/Blob 的核心接口，所有读取方法都是异步的，靠事件回调获取结果。

• readAsText(file, encoding)：读为字符串，适合 txt、json、csv 等文本文件；默认 utf-8，可指定如 'gbk'（需配合 encoding 库）
• readAsDataURL(file)：生成 base64 数据 URL，常用于预览图片（img.src = result）
• readAsArrayBuffer(file)：读为二进制缓冲区，适合处理音视频、Excel、图像像素等底层操作
• 监听 load 事件取 reader.result，error 事件捕获失败（比如文件过大或编码错误）

常见实用场景示例

不需要框架，几行原生 JS 就能搞定：

标签： javascript excel java js 前端 json 编码 浏览器 safari csv 配置文件 浏览器端