仅靠HTML的accept属性无法限制正方形图片，因其仅按MIME类型过滤而不解析像素尺寸；必须用FileReader+Image API读取naturalWidth/naturalHeight校验，并服务端二次解码验证。
仅靠 HTML 的 accept 属性无法判断图片宽高比，更不能限制“正方形”。必须结合 JavaScript 读取图像元数据，在上传前做尺寸校验。
为什么 accept 对正方形完全无效
accept 只能按 MIME 类型或扩展名过滤文件类型（如 image/png），它不解析文件内容，也不访问像素尺寸。用户选一个 1920×1080 的 JPG，accept="image/*" 照样放行——浏览器根本不知道它是横图还是竖图，更别说是不是正方形。
常见错误是误以为加了 accept 就能控制几何属性，结果后端收到一堆非正方形图，还得额外裁剪或拒收。
用 FileReader + Image API 检查宽高比
核心思路：用户选中文件后，用 FileReader 读取为 data URL，再用 Image 对象加载，读取 naturalWidth 和 naturalHeight 判断是否相等。
立即学习“前端免费学习笔记（深入）”；
- 必须用
naturalWidth/naturalHeight，不是width/height（后者受 CSS 或缩放影响） - 注意异步：
img.onload才能确保尺寸可用，不能在readAsDataURL后立刻读 - 容忍微小误差：浮点计算或压缩可能导致 1000×1000 读成 999×1001，建议用差值 ≤ 2 像素作为正方形判定条件
示例逻辑：
const fileInput = document.getElementById('image');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
<p>const reader = new FileReader();
reader.onload = () => {
const img = new Image();
img.onload = () => {
const isSquare = Math.abs(img.naturalWidth - img.naturalHeight) <= 2;
if (!isSquare) {
alert('请上传正方形图片（宽高等像素）');
fileInput.value = ''; // 清空 input，否则重复触发
}
};
img.src = reader.result;
};
reader.readAsDataURL(file);
});服务端仍需二次校验宽高比
前端 JS 可被禁用或绕过（例如直接 POST 构造请求）。服务端拿到文件后，必须重新解码图像并检查原始尺寸：
- Node.js：用
sharp或jimp读取 buffer，调metadata()获取 width/height - Python：用
PIL.Image.open()读取，检查img.size - PHP：用
getimagesize()，别信$_FILES['file']['type']
关键点：不能只看文件头魔数（magic bytes）——它只能确认是 PNG/JPEG，不能告诉你宽高；必须实际解码图像帧。
移动端 Safari 的兼容性坑
iOS Safari 对 FileReader 读取大图有时会卡顿或失败，尤其超过 5MB 的 HEIC 或高分辨率 WebP。建议：
- 先检查
file.size，超限（如 > 4MB）直接提示“图片过大，请压缩后上传” - 对 HEIC 格式单独处理：Safari 上传 HEIC 时
file.type可能为空或为application/octet-stream，不能依赖type过滤，得靠扩展名（file.name.toLowerCase().endsWith('.heic')）或服务端识别 - 避免在
onload里做耗时操作，校验失败时立即清空input.value，防止用户误点提交
真正可靠的正方形限制，是前端快速拦截明显不合格的图 + 服务端强制重验原始像素尺寸。少一层，就可能让长图混进数据库。
