HTML怎么上传带密码保护的PDF文件-html教程-PHP中文网

不能直接上传带密码保护的pdf，因浏览器无法解密，需前端用用户密码派生aes-gcm密钥加密pdf字节流，并连同iv、salt等元数据上传。

html怎么上传带密码保护的pdf文件

不能直接上传“带密码保护的PDF文件”本身——浏览器不识别PDF密码，input type="file"拿到的只是加密后的二进制流，后端无法自动解密。真正可行的路径是：前端读取文件 → 用户输入密码 → 用密码派生密钥 → 在上传前对PDF内容加密（或解密后重加密）→ 连同IV、盐值等元数据一并提交。

为什么不能直接传密码保护的PDF

用户本地打开的“密码保护PDF”，其密码验证完全由PDF阅读器在客户端完成；input type="file"只暴露File对象，里面没有“密码字段”，也没有解密接口。你拿到的file就是一段被AES-256加密过的字节流（类型仍是application/pdf），后端收到后若无密钥，连是否为合法PDF都校验不了。

常见错误现象：

上传后服务端解析失败，报错Invalid PDF structure或直接返回空响应
误以为accept="application/pdf"能过滤掉非PDF或带密码PDF——它只按MIME类型匹配，加密PDF仍算application/pdf
试图用FileReader.readAsText()读取加密PDF，结果是乱码或报错DOMException: The requested file could not be read

Web Crypto API实现前端加密上传

必须用window.crypto.subtle对PDF内容加密后再上传，确保传输和存储时始终是密文。关键点不是“保护PDF”，而是“用用户密码控制访问权”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

实操建议：

用FileReader.readAsArrayBuffer(file)读取PDF原始字节，避免转base64（体积膨胀、内存残留风险）
用crypto.subtle.importKey() + deriveKey()（PBKDF2 + salt + 100_000次迭代）从用户密码生成AES-GCM密钥
加密时生成12字节iv和认证标签，它们必须和密文一起上传，不能丢
用FormData.append()分字段提交：FormData.append("encrypted", encryptedBlob)、FormData.append("iv", btoa(String.fromCharCode(...iv)))、FormData.append("salt", btoa(String.fromCharCode(...salt)))
fetch发送时**不要设置Content-Type头**，让浏览器自动生成multipart/form-data; boundary=...

示例片段：

const reader = new FileReader();
reader.onload = async () => {
  const arrayBuffer = reader.result;
  const password = document.getElementById("pwd").value;
  const encoder = new TextEncoder();
  const salt = crypto.getRandomValues(new Uint8Array(16));
  const iv = crypto.getRandomValues(new Uint8Array(12));

  const key = await crypto.subtle.importKey(
    "raw",
    await crypto.subtle.deriveKey(
      { name: "PBKDF2", salt, iterations: 100_000, hash: "SHA-256" },
      await crypto.subtle.importKey("raw", encoder.encode(password), { name: "PBKDF2" }, false, ["deriveKey"]),
      { name: "AES-GCM", length: 256 },
      false,
      ["encrypt"]
    ),
    { name: "AES-GCM" },
    false,
    ["encrypt"]
  );

  const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, arrayBuffer);
  const fd = new FormData();
  fd.append("encrypted", new Blob([encrypted], { type: "application/octet-stream" }));
  fd.append("iv", btoa(String.fromCharCode(...iv)));
  fd.append("salt", btoa(String.fromCharCode(...salt)));
  fd.append("filename", file.name);

  fetch("/upload-encrypted", { method: "POST", body: fd });
};