HTML无法直接上传PDF，需结合<input type="file" accept=".pdf" multiple>选择文件，并用JavaScript的FormData+fetch发起POST请求；后端必须校验MIME类型、PDF魔数及发票字段。
HTML本身不能直接上传PDF文件到服务器
HTML只提供表单控件和提交能力，<input type="file"> 可以让用户选择发票PDF，但“上传”动作必须由JavaScript发起请求，或靠表单submit交由后端处理。纯HTML点击后没反应，是正常现象——它不包含网络传输逻辑。
用 <input type="file" accept=".pdf" multiple> 限制发票格式
发票通常为PDF，加accept=".pdf"能过滤非PDF文件（浏览器级提示），避免用户误选；multiple可支持一次传多张发票。注意：accept可被绕过，后端仍需校验MIME类型和文件头。
常见错误：写成 accept="application/pdf" —— 部分iOS Safari不识别，推荐用扩展名更稳妥。
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="file" id="invoiceUpload" accept=".pdf" multiple>
用 FormData + fetch 上传PDF到后端接口
用户选完文件后，得用JS读取files列表，构造FormData发送。发票PDF常含敏感信息，别用GET，务必用POST/PUT + HTTPS。
-
FormData.append("file", file)中的"file"键名要和后端约定一致（如Spring Boot用@RequestParam("file")） - 发票可能较大（扫描件超10MB），需设
fetch超时、加上传进度监听（XMLHttpRequest更易监听，fetch需配合ReadableStream） - 别漏掉
Content-Type: multipart/form-data——FormData会自动设置边界（boundary），手动设反而会破坏结构
简短示例：
const input = document.getElementById("invoiceUpload");<br>input.addEventListener("change", async () => {<br> const files = Array.from(input.files);<br> const formData = new FormData();<br> files.forEach(f => formData.append("file", f));<br> await fetch("/api/upload/invoice", { method: "POST", body: formData });<br>});
后端接收时容易忽略的发票校验点
前端限制只是第一道门，发票PDF上传后必须做三件事：
- 检查
Content-Type是否为application/pdf（而非伪造的text/plain） - 读取文件前256字节，验证PDF魔数是否为
%PDF-（防扩展名欺骗） - 解析PDF文本或元数据，确认含“发票代码”“发票号码”等字段（可用
pdfjs-dist或服务端库如pdfminer）
没做这些，攻击者可上传恶意PDF或伪装成发票的EXE文件，绕过所有前端防护。
发票上传不是选文件+发请求就完事，真正的门槛在后端校验粒度和PDF内容可信度判断上。
