JavaScript怎样处理文件上传_JavaScript中文件API有哪些用法-js教程-PHP中文网

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

javascript怎样处理文件上传_javascript中文件api有哪些用法

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 预览或读取文件内容

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

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

创建 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）