html的input file不支持自动批量上传，需javascript监听multiple选择并用formdata逐个上传至后端，ios safari存在多选pdf兼容问题，服务端必须校验、去重、存对象存储并完成ocr等业务逻辑。
HTML本身不能实现批量上传，必须配合JavaScript和后端
HTML的 <input type="file"> 只提供文件选择界面，不处理上传逻辑。所谓“自动批量上传”，实际是用户选中多个文件后，前端用JavaScript触发上传请求，后端接收并保存。浏览器出于安全限制，无法绕过用户主动选择直接读取本地路径或自动提交。
常见错误现象：input 设置了 multiple 但没写JS监听，点了没反应；或写了JS但没处理 event.target.files 的 FileList 对象，只取了第一个文件。
- 必须加
multiple属性才能多选：<input type="file" id="invoiceUpload" multiple accept=".pdf,.jpg,.png"> -
accept推荐限定发票常见格式，避免用户误选无关文件 - 不要依赖
value属性读路径——现代浏览器返回假路径（如C:\fakepath\xxx.pdf），应始终用files属性获取真实 File 对象
用FormData + fetch 实现无刷新批量上传
核心是把 input.files 中每个 File 对象 append 到 FormData，再用 fetch 发送。注意：不能直接传整个 FileList，要逐个 append，否则后端可能只收到一个文件。
典型使用场景：财务人员一次拖入20张PDF发票，前端压缩打包？不用。直接逐个上传更稳，失败可重试单张，也方便后端校验文件名、大小、MIME类型。
- 示例关键代码片段：
const input = document.getElementById('invoiceUpload');
input.addEventListener('change', async (e) => {
const files = e.target.files;
const uploadPromises = [];
<p>for (let i = 0; i </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false;">uploadPromises.push(
fetch('/api/upload-invoice', {
method: 'POST',
body: formData
}).then(r => r.json())
);}
const results = await Promise.allSettled(uploadPromises); console.log('上传完成，结果：', results); });
- 用
Promise.allSettled而非Promise.all，避免单个失败导致全部中断 - 后端接口（如
/api/upload-invoice）需支持multipart/form-data解析，且对单次请求只处理一个文件 - 若需显示进度条，得用
XMLHttpRequest.upload.onprogress，fetch原生不支持上传进度
常见坑：iOS Safari 无法多选PDF、Chrome 拖拽上传失败
iOS Safari 对 input[type="file"] 的 multiple 支持不稳定，尤其PDF文件常被降级为单选。这不是代码问题，是系统限制。解决思路不是硬刚，而是降级兼容。
- 给用户明确提示：“iOS请逐张上传” 或 “推荐使用Chrome/Edge浏览器”
- 允许拖拽区域（
dragover/drop监听），但注意：Safari 15.4+ 才支持拖拽PDF到网页，旧版仍不行 - 服务端必须校验
Content-Type，不能只信前端传的accept—— 用户可手动改请求，传个 .exe 冒充 .pdf - 单文件大小建议前端用
file.size > 10 * 1024 * 1024拦截（如10MB），避免上传一半失败浪费带宽
后端必须做的事，前端没法绕过
前端只是“发起请求”，真正存储、归档、OCR识别、防重复上传，全靠后端。比如两张同名发票PDF，后端得按哈希值去重，而不是靠文件名判断。
- 必须生成唯一文件ID（如UUID），避免中文名、特殊字符导致路径错误
- 发票文件建议存对象存储（如AWS S3、阿里云OSS），而非服务器磁盘，防止爆满或单点故障
- 返回结构要包含每张发票的处理状态：
{ "file": "a.pdf", "status": "success", "invoice_no": "FP2024001" }，前端据此更新UI - 如果需要“自动识别发票号码”，那是OCR服务的事（如百度OCR、腾讯云TI-ONE），前端只负责把文件传过去，别试图在浏览器里跑Python模型
最易被忽略的一点：上传成功不等于业务入库成功。发票号校验、税号匹配、重复检测这些，必须放在后端事务里做，前端弹个“上传成功”就完事，大概率导致财务数据错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
