JavaScript如何实现文件上传_JavaScript如何读取文件内容并预览
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
