移动端表单怎么用原生校验限制文件上传的类型与大小-H5教程-PHP中文网

移动端文件上传校验需组合使用accept属性（推荐扩展名+mime双写）、javascript change事件（检查name扩展名、size大小并重置value）及表单提交前兜底检查，但所有前端限制均不可替代后端基于魔数、路径安全和文件重命名的真实校验。

移动端表单怎么用原生校验限制文件上传的类型与大小

移动端用原生 HTML 校验限制文件上传类型和大小，核心是组合使用 accept、required 和 JavaScript 的 change 事件校验，但必须清醒认识：这些都只是用户体验层的提示与拦截，**不能替代后端真实校验**。尤其在 iOS Safari、微信 WebView 等环境下，accept 常被忽略或弱支持，拖拽上传也绕过选择框过滤。

accept 属性：仅作类型提示，写法要兼顾兼容性

移动端浏览器对 MIME 类型识别差异大，Safari 尤其不信任 accept="application/pdf" 这类写法。推荐采用「扩展名 + MIME」双写方式，用英文逗号分隔、不加空格：

图片：accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
Pdf：accept=".pdf,application/pdf"
禁止 HTML/JS：不要写 accept="text/html"——这反而会让用户更容易选中 .html 文件

注意：accept 在 iOS 微信内置浏览器中基本失效，用户点“从手机相册选择”或“拍摄”时，系统直接跳过过滤逻辑；capture="camera" 会进一步覆盖 accept 行为，慎用。

JavaScript 校验：必须同时检查 name、type 和 size

监听 input[type="file"] 的 change 事件，在用户选完后立刻判断。关键点：

file.name 提取扩展名（用 file.name.split('.').pop().toLowerCase()），注意处理无扩展名、多点文件（如 data.tar.gz）
file.type 不可靠（拖拽上传常为空字符串，重命名文件可伪造），但可作为辅助参考
file.size 单位是字节，需换算（如 5MB = 5 * 1024 * 1024）
校验失败后务必执行 input.value = ''，否则同名文件重复选择不会再次触发 change

示例逻辑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const ext = file.name.split('.').pop().toLowerCase();
  const maxSize = 5 * 1024 * 1024;
  if (!['jpg', 'jpeg', 'png'].includes(ext) || file.size > maxSize) {
    alert('仅支持 JPG/PNG，且不超过 5MB');
    e.target.value = '';
  }
});