JavaScript怎样处理文件上传_JavaScript中文件API有哪些用法

JavaScript 无法直接读取本地文件，但可通过 File API 和 FormData 配合 fetch 实现安全上传；用 input[type="file"] 获取 File 实例，FileReader 预览小文件，FormData + fetch 上传并支持进度监听，URL.createObjectURL 快速预览，所有操作需用户主动触发。

JavaScript 本身不能直接读取或上传用户本地文件（出于安全限制），但可以通过浏览器提供的 File API 和 FormData 配合 XMLHttpRequest 或 fetch 实现安全、可控的文件上传流程。

如何用 input[type="file"] 获取文件

这是最常用入口。用户选择文件后，input 元素的 files 属性返回一个 FileList 对象（类似数组）：

• input.files[0] 可获取第一个选中文件（File 实例）
• File 继承自 Blob，拥有 name、size、type（MIME 类型）、lastModified 等属性
• 支持多选时，设置 multiple 属性，再遍历 files

用 FileReader 预览或读取文件内容

适合小文件（如图片预览、文本解析），不发请求，纯前端处理：

• 创建 new FileReader()
• 监听 load 事件：读取完成后，reader.result 包含结果（base64 或字符串）
• 常用方法：readAsDataURL()（转 base64）、readAsText()（文本）、readAsArrayBuffer()（二进制）
• 注意：大文件读取可能阻塞主线程，建议配合 AbortController 或分块读取

用 FormData + fetch 实现文件上传

这是现代推荐方式，简洁且支持进度监听：

• 新建 FormData 实例，用 .append("field", file) 添加文件（可附加其他字段）
• 调用 fetch(url, { method: 'POST', body: formData }) —— 不需设 Content-Type，浏览器自动加 multipart/form-data 边界
• 监听上传进度：通过 upload.onprogress（XMLHttpRequest）或使用 ReadableStream + TransformStream（fetch 高级用法，较复杂）
• 服务端需解析 multipart 数据（如 Express 中用 multer，Node.js 原生需流式解析）

File API 的其他实用接口

除了基础读写，还有更精细控制能力：

• URL.createObjectURL(file)：生成临时 blob URL，用于快速预览图片/视频（记得用完调 URL.revokeObjectURL() 释放内存）
• FileList 是只读类数组，不可直接修改；如需过滤或重组，可用 Array.from(files) 转为数组操作
• Drag & Drop 场景中，从 event.dataTransfer.files 同样获取 FileList
• 结合 Streams API 可实现分片上传、断点续传（例如每次读取 file.stream().getReader() 的 chunk）

不复杂但容易忽略：所有文件操作都依赖用户主动触发（如点击、拖入），不能自动读取路径或静默上传。安全边界清晰，功能足够支撑绝大多数上传需求。