如何实现文件上传功能_INPUT类型为FILE的文件选择处理-html教程-PHP中文网

应使用change事件监听，因其在用户确认选择文件后可靠触发；click无法捕获选中动作，input在safari等浏览器中不可靠；需设multiple属性支持多文件，files为只读filelist，通过e.target.files[0]获取file对象。

如何实现文件上传功能_input类型为file的文件选择处理

如何监听 `<input type="file">` 的文件选择事件

直接用 change 事件监听，别用 click 或 input —— 后者在部分浏览器（如 Safari）中无法可靠触发，click 则根本捕获不到选中动作。

关键点：用户点击“选择文件”并确认后，change 才会触发；取消选择或重复选同一个文件，某些浏览器可能不触发（需手动清空 input.files 或重置 input.value 来保证一致性）。

input.addEventListener('change', e => { const files = e.target.files; }) —— files 是 FileList，只读，类数组，不能用 map 等数组方法直接调用
若需多文件，务必设置 multiple 属性：<input type="file" multiple>，否则 files.length 永远 ≤ 1
选中文件后，e.target.files[0] 是 File 对象，继承自 Blob，有 name、size、type、lastModified 等属性

如何读取本地文件内容（文本/图片等）而不上传

用 FileReader，不是 fetch 或 XMLHttpRequest —— 那些是发请求用的，本地文件得靠 FileReader 异步读取。

常见错误：在 readAsText 后立刻访问 result，但此时读取未完成；必须等 load 事件。

const fr = new FileReader(); fr.onload = () => console.log(fr.result); fr.readAsText(file);
读图片推荐用 readAsDataURL，结果是 base64 字符串，可直接赋给 <img src>
大文件慎用 readAsDataURL，内存占用高；超 50MB 建议改用 readAsArrayBuffer + 流式处理
FileReader 不支持 async/await，需封装 Promise，否则容易陷入回调地狱

如何通过 `FormData` 发起文件上传请求

后端接收的是 multipart/form-data，前端必须用 FormData 构造体，不能把文件塞进普通 JSON 对象里发过去 —— 那样后端收不到二进制数据。

堡塔APP

堡塔APP是堡塔面板的移动应用版本，支持在iOS和Android设备上管理服务器。

下载

注意：fetch 默认不设 Content-Type 头，交给浏览器自动加 boundary；手动设会导致失败。

const fd = new FormData(); fd.append('file', file); fd.append('filename', file.name); —— 键名要和后端约定一致（如 file、upload、images[]）
多个文件：循环 append，同名键名（如 fd.append('files', f) 多次）可让后端收到数组
用 fetch('/upload', { method: 'POST', body: fd }) 即可，不要加 headers: {'Content-Type': '...'}
上传进度需监听 XMLHttpRequest.upload.onprogress；fetch 原生不支持进度，得用 ReadableStream + pipeTo（兼容性差），实际项目中仍倾向 XMLHttpRequest

常见报错与绕过限制的现实做法

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob' —— 多半是传了字符串或 null 进去，检查 files[0] 是否存在，是否误用了 e.target.value（那是路径字符串，已废弃且不可靠）。

跨域、413 Payload Too Large、后端收不到字段，往往不是前端代码问题，而是配置漏项。

Nginx 默认限制 client_max_body_size 1m，上传大文件必改配置
Node.js 的 express 需配 express.json({ limit: '50mb' }) 和 express.urlencoded({ limit: '50mb' })，但它们对 multipart 无效，得用 multer 或 busboy
Chrome 对本地 file:// 协议禁用 FileReader 和表单提交，调试必须走 http://localhost（用 npx serve 或 VS Code Live Server）
移动端 iOS Safari 对 capture="camera" 支持不稳定，建议 fallback 到默认文件选择器