如何使用JavaScript实现文件上传功能_JavaScript如何读取用户本地文件_技术教程

必须通过用户主动触发的获取File对象，不可脚本自动调起；其files属性返回只读FileList，File继承Blob；读取用FileReader（禁用readAsDataURL处理大文件）；上传用FormData配合fetch；浏览器禁止访问真实路径或本地文件系统。

用 `input[type="file"]` 获取用户选择的文件对象

浏览器中读取本地文件的前提是用户主动触发选择，不能脚本自动调起。必须通过元素，且需用户点击操作（如点击、空格键、回车），否则现代浏览器会静默拒绝。

获取到的不是路径字符串，而是 FileList 对象，里面每个项都是 File 实例（继承自 Blob）：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0]; // 用户选中的第一个文件
  if (!file) return;
  console.log(file.name);     // 文件名
  console.log(file.size);     // 字节数
  console.log(file.type);     // MIME 类型（可能为空）
});

e.target.files 是只读的 FileList，不可修改或赋值
用户取消选择时，e.target.files.length 为 0，不会返回 null
多选需加 multiple 属性，但 iOS Safari 对该属性支持不稳定
file.type 不可靠——浏览器仅根据扩展名或头部推测，可被伪造

用 `FileReader` 读取文件内容（文本/二进制）

FileReader 是唯一标准方式，在主线程解析文件内容。它不发送网络请求，纯前端处理，适合预览、校验、转 Base64 等场景。

注意：大文件（如 >100MB）容易导致内存暴涨甚至页面卡死，应避免直接 readAsDataURL；优先用 readAsArrayBuffer 或流式分块读取。

const reader = new FileReader();
reader.onload = (e) => {
  const content = e.target.result; // 根据 read 方法不同，类型可能是 string / ArrayBuffer
  console.log(content);
};
reader.onerror = () => {
  console.error('读取失败：', reader.error?.message);
};
// 可选方法：
// reader.readAsText(file, 'UTF-8');      // 返回字符串
// reader.readAsArrayBuffer(file);        // 返回 ArrayBuffer
// reader.readAsDataURL(file);          // 返回 data:xxx;base64,xxx（慎用！）

每次只能处理一个 File，重复调用 readAs* 会中止前一次操作
onload 回调中，e.target.result 的类型取决于所用的 readAs* 方法
读取二进制内容后，如需转字符串，用 new TextDecoder().decode(arrayBuffer)，别依赖 readAsText 的编码参数（某些浏览器忽略）

用 `FormData` + `fetch` 上传文件到服务器

上传本质是 HTTP POST 请求，把文件作为表单字段发给后端。推荐用 FormData 构造请求体，它能自动设置正确的 Content-Type: multipart/form-data 边界头。

不要手动拼接 multipart 数据，也不要试图把 File 转成 JSON 发送——后端无法解析。

const file = input.files[0];
if (!file) return;

const formData = new FormData();
formData.append('upload', file);           // 字段名 'upload' 需与后端约定
formData.append('meta', JSON.stringify({   // 可附加其他字段
  filename: file.name,
  size: file.size
}));

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要设 headers.Content-Type，浏览器会自动设置
})
.then(r => r.json())
.then(console.log)
.catch(console.error);

FormData.append() 第二个参数可以是 File、Blob 或字符串；第三个参数可指定文件名（覆盖原始 file.name）
若后端要求字段名带数组语法（如 files[]），直接写成 formData.append('files[]', file) 即可
上传进度监听需用 XMLHttpRequest.upload.onprogress，fetch 原生不支持（可用 ReadableStream 分块读取模拟，但复杂度高）

常见错误和绕不过去的限制

很多“读取本地文件”的需求其实混淆了安全边界。浏览器禁止 JS 直接访问任意路径，这是硬性策略，不是 API 缺失。

试图用 fs.readFile 或 require('fs') —— 这是 Node.js API，在浏览器环境根本不存在
用 file:// 协议打开 HTML 页面后读取同目录文件 —— Chrome/Firefox 默认禁用跨源请求，会报 CORS 或 SecurityError
用 URL.createObjectURL(file) 后再 fetch() 该 URL —— 这只是内存引用，不是真实路径，且必须在 revoke 前使用，否则泄漏
期望获得用户硬盘上的绝对路径（如 C:\xxx\yyy.jpg）—— 浏览器永远只返回 C:\fakepath\yyy.jpg 或空字符串，这是隐私保护强制行为