如何实现文件上传_javascript中文件API如何使用？-js教程-PHP中文网

如何实现文件上传_javascript中文件API如何使用？

紅蓮之龍

发布： 2025-12-18 22:05:02

原创

586人浏览过

JavaScript 文件上传核心是 File API 与 FormData 配合 fetch/XHR：通过 input[type=file] 获取 FileList，用 FileReader 异步读取内容，再以 FormData 提交至后端，并校验类型、大小及错误处理。

如何实现文件上传_javascript中文件api如何使用？

文件上传在 JavaScript 中主要靠 File API 和 FormData 配合 fetch 或 XMLHttpRequest 实现，核心是让用户选中文件、读取元数据或内容、再发给后端。

获取用户选择的文件

通过 <input type="file"> 获取文件列表，files 属性返回 FileList 对象（类似数组）：

单文件：用 input.files[0]；多文件需遍历 input.files
File 是 Blob 的子类，自带 name、size、type、lastModified 等属性
监听 change 事件，避免重复提交或未触发

预览图片或读取文件内容

用 FileReader 异步读取文件内容，适合预览、校验或转 Base64：

readAsDataURL(file) → 得到 data URL，可直接赋给 <img src alt="如何实现文件上传_javascript中文件API如何使用？" >
readAsText(file, encoding) → 读文本文件（如 JSON、CSV）
readAsArrayBuffer(file) → 适合二进制处理或大文件分片
注意：FileReader 是异步的，用 onload 拿结果，onerror 处理失败

构造请求上传到服务器

推荐用 FormData 包装文件，自动设置 Content-Type: multipart/form-data：

网奇英文商城外贸系统

网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模

查看详情

立即学习“Java免费学习笔记（深入）”；

const fd = new FormData(); fd.append('file', file);
支持追加多个同名字段（如多图上传），也支持额外字段：fd.append('desc', '封面图')
用 fetch('/upload', { method: 'POST', body: fd }) 发送，无需手动设 header
如需进度监听，XMLHttpRequest 的 upload.onprogress 更直观；fetch 需配合 ReadableStream（较复杂）