javascript中的文件操作如何实现_如何读取用户上传的文件

JavaScript无法直接读写本地文件系统，只能通过File API异步读取用户主动选择的文件；需结合获取File对象，再用FileReader的readAsText等方法读取内容，并监听onload事件获取结果。

JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过浏览器提供的 File API 读取用户主动选择并上传的文件。核心是结合 <input type="file"> 和 FileReader 对象。

获取用户选择的文件

用户必须主动触发文件选择（比如点击上传按钮），不能自动读取任意路径的文件：

• 使用 <input type="file"> 元素，监听 change 事件
• 从 event.target.files 中获取 FileList 对象（类似数组）
• 每个 File 对象继承自 Blob，包含 name、size、type 等属性

用 FileReader 读取文件内容

FileReader 是浏览器内置对象，支持异步读取文件为文本、DataURL、ArrayBuffer 等格式：

• readAsText(file, encoding) → 读为字符串（常用，如读取 .txt、.json、.csv）
• readAsDataURL(file) → 读为 base64 字符串（适合图片预览）
• readAsArrayBuffer(file) → 读为二进制缓冲区（适合处理音视频、Excel 等）
• 通过 onload 获取结果：reader.result；出错时监听 onerror

简单示例：读取并显示文本文件

HTML：

标签： javascript excel java html js json 编码 浏览器 csv