JavaScript实现文件上传方法解析

本文深入解析了JavaScript实现文件上传的核心流程与关键技术要点：从通过`<input type="file">`获取只读的FileList对象，到利用FormData自动封装文件及文本字段（无需手动处理boundary和Content-Type），再到使用fetch发送符合规范的POST请求；同时指出fetch原生不支持上传进度监听的局限，并提供了基于XMLHttpRequest或服务端预签名URL等实用替代方案，兼顾安全性、兼容性与用户体验，是前端文件上传实践的清晰指南。

JavaScript 本身不能直接访问本地文件系统或绕过浏览器安全限制上传文件，但可以通过 <input type="file"> 结合 FormData 和 fetch（或 XMLHttpRequest）将用户选择的文件发送到服务器。关键在于前端收集文件、构造请求，后端接收并保存。

获取用户选择的文件

使用原生 <input type="file"> 元素，监听 change 事件即可拿到 FileList 对象：

<input type="file" id="fileInput" multiple>

注意：单个文件用 files[0]，多个文件用 files 遍历；files 是只读类数组，不可修改。

构造 FormData 并添加文件

FormData 是专为表单数据设计的接口，能自动处理文件二进制内容和边界（boundary），无需手动设置 Content-Type：

• 创建实例：const formData = new FormData();
• 添加单个文件：formData.append('file', fileInput.files[0]);
• 添加多个文件（带索引或名称）：Array.from(fileInput.files).forEach((file, i) => formData.append('files', file));
• 也可同时附加文本字段：formData.append('desc', '上传说明');

通过 fetch 发送上传请求

fetch 发送 FormData 时，浏览器会自动设置正确的 Content-Type（含 boundary），不需要手动指定：

• 基础写法：fetch('/upload', { method: 'POST', body: formData })
• 如需携带认证信息（如 token），可加 headers（但不要覆盖 Content-Type，让它由浏览器自动生成）
• 建议加上 catch 和响应状态检查，避免静默失败

简单进度监控（可选）

使用 XMLHttpRequest 可监听上传进度，fetch 原生不支持，但可通过 ReadableStream 或第三方库（如 uploadx）实现。若坚持用 fetch，常见折中方案是：服务端返回预签名 URL，前端用 PUT 直传（如 AWS S3），再由客户端轮询或监听回调。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript实现文件上传方法解析》文章吧，也可关注golang学习网公众号了解相关技术文章。