17370845950

JavaScript通过File API获取用户选择的文件对象，再用FormData和fetch（或XMLHttpRequest）上传；支持多选、类型限制、预览读取及进度监控，核心流程为选文件→获取File→校验/处理→上传。

JavaScript 本身不直接上传文件，而是通过 File API 获取用户选择的文件对象，再配合 FormData 和 fetch（或 XMLHttpRequest）将文件发送到服务器。关键在于：它不操作磁盘，只读取浏览器中用户授权选中的文件内容。

如何获取用户选择的文件

用户通过 选择文件后，JavaScript 可以从其 files 属性拿到一个 FileList 对象——它是类数组，每个元素都是 File 实例（继承自 Blob）。

• 支持多选时加 multiple 属性：
• 可限制类型：accept="image/*,.pdf"
• files[0] 就是第一个选中的文件，含 name、size、type、lastModified 等只读属性

如何预览或读取文件内容（前端处理）

如果想在上传前显示图片、解析文本或校验大小，用 FileReader：

• reader.readAsDataURL(file) → 转成 base64（适合小图预览）
• reader.readAsText(file) → 读文本文件（如 .txt、.json）
• reader.readAsArrayBuffer(file) → 读二进制（适合音频、加密等）
• 监听 load 事件获取结果：reader.result

注意：FileReader 是异步的，不能直接 return 结果；大文件慎用 dataURL，容易卡顿或内存溢出。

如何上传文件到服务器

最常用方式是构造 FormData，把文件 append 进去，再用 fetch 发送：

• const formData = new FormData();
• formData.append('upload', file);（键名需与后端约定，如 upload 或 file）
• fetch('/api/upload', { method: 'POST', body: formData })

注意：FormData 自动设置合适的 Content-Type（带 boundary），所以不要手动设 headers: {'Content-Type': '...'}，否则会出错。

如何监控上传进度

使用 fetch 时无法直接监听进度，推荐改用 XMLHttpRequest：

• 创建 xhr = new XMLHttpRequest()
• 监听 xhr.upload.onprogress = e => { console.log(e.loaded / e.total) }
• 然后调用 xhr.open('POST', '/api/upload')，再 xhr.send(formData)

现代项目也可用 ReadableStream + fetch 分块上传，但复杂度高，一般用于大文件断点续传。

基本上就这些。核心逻辑很清晰：选文件 → 拿到 File 对象 → 按需读取或校验 → 包进 FormData → 发请求。不复杂但容易忽略细节，比如没处理空文件、没关掉重复提交、没做 size/type 校验。