JavaScript中如何实现文件上传_FileAPI使用

File API 是文件上传的基础，需配合 XMLHttpRequest 或 Fetch 使用；通过 input[type="file"] 获取 File 对象，校验大小与类型后，用 FormData 构造请求并发送，支持进度监听与错误处理。

JavaScript 中实现文件上传，File API 是基础支撑，但它本身不直接“上传”，而是配合 XMLHttpRequest 或 Fetch API 完成上传逻辑。所谓“FileAPI 使用”，核心是读取、校验、构造并发送文件数据。

获取文件对象：从 input[type="file"] 开始

用户选择文件后，<input type="file"> 的 files 属性返回一个 FileList 对象（类数组），每个项都是 File 实例（继承自 Blob）：

• 用 input.files[0] 获取第一个文件（单选）；多选则遍历 input.files
• File 对象自带属性：name（文件名）、size（字节大小）、type（MIME 类型，如 "image/jpeg"），可用于前端校验
• 注意：不能直接读取文件路径（出于安全限制），file.path 在浏览器中始终为 ""

校验与预处理：别跳过这一步

上传前建议做轻量校验，提升体验并减少无效请求：

• 检查 files.length > 0，避免空提交
• 按 file.size 限制大小（例如 ≤ 5MB）：if (file.size > 5 * 1024 * 1024) { alert("文件不能超过 5MB"); return; }
• 按 file.type 或文件扩展名（file.name.split('.').pop().toLowerCase()）过滤类型，如只允许 ["jpg", "png", "pdf"]
• 如需预览图片，可用 URL.createObjectURL(file) 生成临时 URL 绑定到 <img alt="JavaScript中如何实现文件上传_FileAPI使用" > 标签

构造上传请求：FormData 是关键桥梁

浏览器上传文件必须使用 FormData 对象包装，它能自动设置正确的 Content-Type: multipart/form-data 及边界（boundary）：

标签： javascript java js 前端 json 浏览器 app 字节 后端 pdf