HTML5如何限制上传文件类型_HTML5文件类型限制做法【注意】-html教程-PHP中文网

HTML5的accept属性仅作前端友好提示，无法真正限制文件类型；可靠校验需结合JavaScript读取文件头（magic number）与后端基于文件内容的双重验证。

html5如何限制上传文件类型_html5文件类型限制做法【注意】

HTML5 本身不能真正限制文件类型，accept 属性只是提示浏览器过滤文件选择器中的可选文件，用户仍可手动取消过滤、拖入任意文件，或通过开发者工具绕过。真正的类型校验必须在 JavaScript 中读取 File.type 或检查文件头（magic number），并在后端再次验证。

用 `accept` 属性做前端友好筛选

它只影响文件选择对话框的默认过滤行为，不提供安全保证，但能提升用户体验：

accept="image/*"：显示所有图片类型（image/jpeg、image/png 等）
accept=".pdf,.docx"：按扩展名匹配（注意开头的点不能省略）
accept="application/pdf"：按 MIME 类型匹配（依赖浏览器对文件头的识别能力）
多个值用逗号分隔，如 accept="image/png,image/jpeg,.svg"
该属性对有效，对拖放上传无直接影响

用 JavaScript 检查 `File.type` 和扩展名

File.type 是浏览器根据文件头或扩展名推测出的 MIME 类型，不可靠（例如空文件、改后缀的文件会返回空字符串或错误类型），需配合扩展名二次判断：

<input type="file" id="upload"><script>
document.getElementById('upload').onchange = function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
  const ext = file.name.split('.').pop().toLowerCase();
  const isValidType = validTypes.includes(file.type);
  const isValidExt = ['jpg', 'jpeg', 'png', 'gif'].includes(ext);

  if (!isValidType && !isValidExt) {
    alert('仅支持 JPG/PNG/GIF 图片');
    e.target.value = ''; // 清空输入框
  }
};
</script>

更可靠的校验：读取文件头（Magic Number）

绕过扩展名和 File.type 的欺骗，直接读取文件前几个字节判断真实类型。例如 PNG 文件头是 89 50 4E 47，JPEG 是 FF D8 FF：

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

使用 FileReader.readAsArrayBuffer() 读取前 4 字节
用 Uint8Array 解析字节序列
比对预定义的 magic bytes 表（注意字节序和长度）
适合关键业务场景（如头像上传、证件扫描件），但增加 JS 开销

示例片段（校验 JPEG）：

const reader = new FileReader();
reader.onload = function(e) {
  const buffer = e.target.result;
  const view = new Uint8Array(buffer, 0, 3);
  if (view[0] === 0xFF && view[1] === 0xD8 && view[2] === 0xFF) {
    console.log('确认是 JPEG');
  }
};
reader.readAsArrayBuffer(file.slice(0, 3));