如何在JavaScript中正确过滤图片上传格式，仅允许jpg、jpeg、png类型？

失效原因 #

• 仅依赖photo.type（File对象的MIME类型属性）做校验不可靠：该属性是浏览器根据文件后缀名猜测生成，没有读取真实文件头做校验，遇到后缀篡改、浏览器识别差异的场景就会出现判断错误，这是上传png文件触发报错的核心原因
• 现有错误提示文案和实际允许的文件类型不匹配，你需要支持jpg、jpeg、png、pdf四类文件，但提示仅标注了jpg和pdf，容易误导用户

修复方案 #

采用「MIME类型校验 + 文件后缀名校验」双逻辑判断，覆盖更多异常场景，修复后代码如下：

$(".doc").click(function()  {$("#doc_attach").click();});
$("#doc_attach").change(function() {
    let width  = 0;
    let height = 0;
    let photo  = $(this).prop("files")[0];
    // 避免未选择文件时报错
    if (!photo) return;

    // 配置允许的MIME类型和后缀名单
    const allowedMimeTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf'];
    const allowedSuffixes = ['jpg', 'jpeg', 'png', 'pdf'];
    // 提取文件后缀名并转为小写，规避大小写格式问题
    const fileSuffix = photo.name.split('.').pop().toLowerCase();

    // 满足任意一个校验规则即视为合法文件
    if (allowedMimeTypes.includes(photo.type) || allowedSuffixes.includes(fileSuffix)) {
        if (fileSuffix === 'pdf' || photo.type === 'application/pdf') {
            let index = doc_temp.push({"file": photo}) - 1;
            // 原有PDF格式处理逻辑...
        } else {
            let index = doc_temp.push({"file": photo}) - 1;
            // 原有图片格式处理逻辑...
        }
    } else {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: '仅允许上传jpg、jpeg、png、pdf格式的文件！',
        })
    }
});

额外优化建议 #

给文件选择框添加原生accept属性，从系统文件选择层面就过滤不允许的类型，降低用户误选概率：

<input type="file" id="doc_attach" accept="image/jpg,image/jpeg,image/png,application/pdf">

内容的提问来源于stack exchange，提问作者teefal