JavaScript如何实现文件上传_JavaScript如何读取文件内容并预览

幻影之瞳 2025-12-24 00:00:00 次阅读

JavaScript文件上传与预览核心是FileReader（本地读取预览）和FormData（提交服务器）。FileReader支持readAsDataURL、readAsText（需指定UTF-8编码防乱码）、readAsArrayBuffer；FormData通过append添加文件，fetch或XHR上传，无需手动设Content-Type。

JavaScript 实现文件上传和读取预览，核心在于 File API（尤其是 FileReader）与 FormData 的配合使用。前者负责本地读取和预览，后者负责将文件提交到服务器。

用 FileReader 读取文件并预览

适用于图片、文本等小文件的即时预览，不依赖服务器。

监听的 change 事件，获取 files[0]
创建 new FileReader() 实例
通过 readAsDataURL()（适合图片预览）、readAsText()（适合文本内容）、readAsArrayBuffer()（适合二进制处理）读取文件
在 onload 回调中拿到结果，更新页面元素（如或
```
 显示文本）
```

示例（图片预览）：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    document.querySelector('#preview').src = reader.result;
  };
  reader.readAsDataURL(file);
});

用 FormData 提交文件到服务器

实现真正的“上传”，需配合后端接口接收文件（如 Express、PHP、Spring Boot 等）。

创建 new FormData()
用 append('fieldName', file) 添加文件（字段名需与后端约定一致）
可额外添加其他表单字段，如 formData.append('desc', '用户头像')
用 fetch 或 XMLHttpRequest 发送，注意不要设置 Content-Type（浏览器会自动设为 multipart/form-data 并带上 boundary）

示例（fetch 上传）：

const file = document.querySelector('input[type="file"]').files[0];
const formData = new FormData();
formData.append('avatar', file); // 后端接收字段名为 avatar

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));

读取文本文件内容并显示（带编码处理）

中文文本文件若用 readAsText() 出现乱码，通常因未指定编码格式。

推荐显式传入编码： reader.readAsText(file, 'UTF-8')
支持常见编码如 'GBK'（需后端或用户明确告知），但浏览器原生只保证 UTF-8 和 US-ASCII 可靠
大文件建议分块读取或使用 Stream + TextDecoder 避免内存压力（高级场景）

注意事项与常见问题

安全限制：JS 无法直接读取文件路径（file.path 为空），仅能访问内容和元信息（name、size、type）
跨域上传需服务端配置 CORS，如 Access-Control-Allow-Origin
大文件上传建议加进度条：监听 XMLHttpRequest.upload.onprogress 或使用 fetch 配合 ReadableStream（现代方案）
多文件上传只需遍历 e.target.files 数组，逐个 append 到 FormData