JavaScript 中 BOM 怎么使用 File API 读取用户本地上传的文件内容-js教程-PHP中文网

javascript中bom不直接读文件，file api通过file对象和filereader异步读取用户选择的本地文件，需用户主动触发（如input[type=file]），支持readastext、readasdataurl、readasarraybuffer三种方式。

javascript 中 bom 怎么使用 file api 读取用户本地上传的文件内容

JavaScript 中 BOM 本身不直接提供读取文件的能力，真正负责读取用户本地文件的是 File API（属于 Web API，运行在浏览器环境，依赖 BOM 的全局对象如 window 和 document），它通过 File 对象（来自 `` 或拖放事件）配合 FileReader 实现内容读取。

获取用户选择的文件

必须由用户主动触发（如点击文件输入框），不能脚本自动调用，这是浏览器安全限制：

使用 <input type="file" id="fileInput">，监听 change 事件
从 event.target.files 获取 FileList，它是类数组，首项即第一个选中文件：const file = event.target.files[0];
可检查 file.name、file.size、file.type 等属性做基础校验

用 FileReader 异步读取文件内容

FileReader 是核心接口，所有读取都是异步的，不能同步获取结果：

创建实例：const reader = new FileReader();
监听成功回调：reader.onload = () => { console.log(reader.result); };
监听错误：reader.onerror = () => { console.error(reader.error); };
调用读取方法（根据需求选其一）：
- reader.readAsText(file, 'UTF-8')：读为字符串（推荐处理文本文件）
- reader.readAsDataURL(file)：读为 data URL（适合图片预览）
- reader.readAsArrayBuffer(file)：读为二进制缓冲区（适合处理音视频、Excel 等）

常见注意事项

避免踩坑的关键点：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

每次只能读一个 File；若需读多个，需为每个文件新建 FileReader 实例
reader.result 只在 load 事件后有效，不要在 readAsXXX() 后立即访问
大文件读取可能卡顿，可结合 reader.onprogress 显示加载进度
不能直接读取任意本地路径（如 C:\xxx.txt），仅限用户通过表单或拖放明确授权的文件

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

HTML：<input type="file" accept=".txt"><pre class="brush:php;toolbar:false;" id="output"></pre>

JS：

document.querySelector('input').addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = () => {
    document.getElementById('output').textContent = reader.result;
  };
  reader.onerror = () => {
    alert('读取失败：' + reader.error.message);
  };
  reader.readAsText(file, 'UTF-8');
});

不复杂但容易忽略：一切起点是用户交互，一切读取是异步，一切控制权在 FileReader。