accept 属性仅过滤文件类型，无法限制图片分辨率；真正校验需用 JavaScript 通过 FileReader 和 Image 对象读取 naturalWidth/naturalHeight，且服务端必须二次验证。
accept 属性只能限制文件类型，不能限制图片分辨率
accept 的作用是告诉浏览器“只显示哪些后缀或 MIME 类型的文件”，比如 accept="image/jpeg,image/png" 或 accept=".jpg,.png"。它完全不感知像素、宽高、DPI 或压缩率——哪怕用户选了一张 20000×10000 的 PNG，只要扩展名和 MIME 类型匹配，accept 就放行。
常见误区是以为写成 accept="image/*;max-width=1920" 之类能生效，但这是无效语法，浏览器直接忽略这部分。HTML 规范里没有定义任何分辨率相关的 accept 子参数。
-
accept是纯 UI 过滤，仅影响文件选择对话框中可见文件列表 - 它无法读取文件内容，更不可能解析图片头信息或解码尺寸
- 所有绕过方式（如改扩展名、用 curl 上传、DevTools 修改 DOM）都让它形同虚设
真正校验图片分辨率必须用 JavaScript + FileReader
要在上传前检查宽高，得靠 FileReader 读取文件二进制，再用 Image 对象加载并读取 naturalWidth / naturalHeight。注意：不能依赖 file.type，因为扩展名可伪造；也不能只看 file.size，小文件也可能是超高分图（如 WebP 压缩率高）。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
input[type="file"]的change事件 - 遍历
event.target.files（尤其有multiple时） - 对每个
File实例，用new Image()+URL.createObjectURL()加载并等待load回调 - 在回调里检查
img.naturalWidth > 1920 || img.naturalHeight > 1080等条件 - 校验失败时，手动清空
input.value = ""，否则用户重复提交会复用旧文件
示例片段：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
Array.from(e.target.files).forEach(file => {
if (!file.type.startsWith('image/')) return;
const img = new Image();
img.onload = () => {
if (img.naturalWidth > 1920 || img.naturalHeight > 1080) {
alert(`图片 ${file.name} 超出 1920×1080 分辨率`);
input.value = ''; // 必须清空，否则下次 change 不触发
}
URL.revokeObjectURL(img.src); // 及时释放内存
};
img.src = URL.createObjectURL(file);
});
});
multiple 属性影响文件遍历逻辑，不改变分辨率校验方式
加了 multiple 后，event.target.files 是 FileList，不是单个 File。这意味着你不能只取 files[0] 就完事——用户可能一次选了 5 张图，其中第 2 张和第 4 张超标，其余合规。必须逐个处理。
- 没
multiple：files.length永远是 0 或 1，逻辑简单 - 有
multiple：需Array.from(files)或for (let i = 0; i < files.length; i++)遍历 -
multiple和capture在 iOS/Android 行为差异大，但跟分辨率校验无关——它只管怎么打开选择器（相机 or 图库），不参与后续 JS 校验
服务端才是最终防线，前端校验只是体验优化
前端分辨率检查能拦住大部分误操作，但无法替代服务端验证。用户可以禁用 JS、篡改控制台、用 Postman 构造请求绕过所有前端逻辑。服务端收到文件后，必须：
- 用图像库（如 Python 的 PIL、Node.js 的 sharp）实际解码并读取原始宽高
- 拒绝
Content-Type伪造的文件（例如把 .exe 改成 .jpg 上传） - 校验文件头（magic bytes），而非只看扩展名或请求头里的
Content-Type
容易被忽略的一点：某些格式（如 HEIC、AVIF）在部分浏览器里 Image 对象可能加载失败或返回 0×0，此时前端校验会漏掉，全靠服务端兜底。
