JavaScript如何实现文件上传功能?

JavaScript需通过获取文件,用FormData构造请求体,再以fetch发送至服务器;files为只读类数组,FormData自动处理Content-Type与boundary,fetch不可直接监听进度。

JavaScript 本身不能直接访问本地文件系统或绕过浏览器安全限制上传文件,但可以通过 结合 FormDatafetch(或 XMLHttpRequest)将用户选择的文件发送到服务器。关键在于前端收集文件、构造请求,后端接收并保存。

获取用户选择的文件

使用原生 元素,监听 change 事件即可拿到 FileList 对象:

注意:单个文件用 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),再由客户端轮询或监听回调。