如何验证HTML文件上传类型-html教程-PHP中文网

accept属性仅控制文件选择器默认过滤，无法真正校验文件类型；必须用javascript二次校验：优先检查file.type.startswith('image/')，再fallback到小写后缀正则匹配，同时校验size并清空input.value，高安全场景需读取文件头魔数。

如何验证html文件上传类型

仅靠 accept 属性无法真正验证文件类型，它只影响系统文件选择器的默认过滤行为，用户仍可手动切换为“所有文件”并选中任意格式。必须用 JavaScript 做二次校验，否则前端验证形同虚设。

为什么 accept 属性不能当校验用

accept="image/*" 的作用只是告诉浏览器：“在弹出的本地文件选择窗口里，默认只显示图片类文件”。但它不阻止用户点击下拉菜单改成“所有文件(*.*)”，然后选一个 fake.png（实际是压缩包）上传。IE9 及更早版本甚至完全忽略该属性。某些安卓 WebView 中 accept 完全失效，file.type 恒为空。

常见错误现象包括：

用户上传了 report.docx 但重命名为 report.jpg，file.type 仍可能返回 image/jpeg
file.type 返回空字符串或 application/octet-stream（尤其在移动端或伪造文件头时）
后缀名含多个点（如 my.photo.png），用 file.name.substring(file.name.lastIndexOf('.')) 提取会出错

如何用 JavaScript 正确校验文件类型

优先检查 file.type，再 fallback 到后缀名正则匹配，两者结合才可靠。不要只依赖其中一种。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

先判断 file.type && file.type.startsWith('image/') —— 最轻量、最常用
若 file.type 为空（常见于安卓 WebView 或伪造文件），退而提取后缀：file.name.toLowerCase().match(/\.[a-z0-9]+$/)
用完整正则测试后缀，避免 file.name.endsWith('.jpg') 这类写法（不区分大小写、不处理 .JPG 或 .jpeg.txt）

示例函数：

function isValidImage(file) {
  if (file.type && file.type.startsWith('image/')) return true;
  const ext = file.name.toLowerCase().match(/\.[a-z0-9]+$/);
  return ext && /\.(jpg|jpeg|png|gif|bmp|webp)$/.test(ext[0]);
}