jQuery - INPUT type=File ，图像文件类型验证选项？答案

【问题标题】：jQuery - INPUT type=File , Image FileType Validation options?jQuery - INPUT type=File ，图像文件类型验证选项？
【发布时间】：2010-11-19 06:03:47
【问题描述】：

我有以下几点：

<input id="user_profile_pic" name="user[profile_pic]" type="file">

在服务器上我检查以确保它是图像，但我想先检查客户端。

如果选择的文件输入文件不是 gif、jpg、png 或 bmp，我如何使用 jQuery 提醒用户？

谢谢

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

你想检查元素的值是什么，类似于：

$("#user_profile_pic").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("not an image");
            break;
    }
});

编辑

根据注释更改代码 - 如果不是图像，现在删除所选文件的值。

【讨论】：

Uncaught TypeError: Object # has no method 'onchange'
.change 有效。但这仍然不好，因为它虽然出错，但它仍然选择并在页面上显示文件。
添加这个有效，“.val('');”但我不知道这有多合规……有人吗？
.val('');是一个 jQuery 调用，它所做的只是将元素的 value 属性设置为 '' - 这与页面加载时相同。
对于谷歌用户； AFAIK 并非所有浏览器都允许您重置文件输入的值。我发现的最优雅的跨浏览器解决方案是element.wrap('<form>').closest('form').get(0).reset(); element.unwrap();

【解决方案2】：

这很简单，不需要任何 JavaScript 验证。只要写这个，它就会只接受图像文件。

 <input type="file" multiple accept='image/*'>

【讨论】：

这很酷，但它不能作为验证！从具有不同扩展名的文件夹中选择图像只是为了更容易处理。正如你在这里看到的 -> imageshack.us/a/img20/8451/switchzz.jpg
在某些浏览器中，可以通过在文件对话框中选择“所有文件”来覆盖在 HTML 中定义它的选项。第二，尽管它本身并不是 100% 万无一失的，但使用 javascript 验证它是对抗恶意活动的又一附加威慑。总而言之，您希望在接受之前让您的后端验证，并且作为额外的奖励，通过检查和验证文件的前几个字节来验证它是您真正想要的类型，因为仅通过扩展从来都不是一个万无一失的方法。

【解决方案3】：

你可以使用正则表达式：

var val = $("#user_profile_pic").val();
if (!val.match(/(?:gif|jpg|png|bmp)$/)) {
    // inputted file path is not an image of one of the above types
    alert("inputted file path is not an image!");
}

当然，您可以向正则表达式添加更多格式。有更复杂和更全面的方法可以完成此任务，但只要输入的图像文件路径以标准图像文件扩展名结尾，此方法就可以完成任务。

【讨论】：

如果有三个输入文件，我想一个一个地验证它们怎么办？ var val1=..., var val2=... var val3 =... if (!val.match(/(?:gif|jpg|png|bmp)$/)) {

【解决方案4】：

可能有浏览器允许您创建给定路径的<img/>，通过它您可以检查它是否是真实图像（如果不是，onerror-event 应该在图像上触发并且它将具有宽度/高度为 0)。

但由于这只适用于某些浏览器并且存在安全风险（在我看来），我不建议这样做，所以我的回答是：你无法验证那里的任何东西。

检查 Alex 建议的文件扩展名可能是一种选择，但文件扩展名并不能保证它是否是图像。但是，作为一个简单的预检查（不是验证），它可能很有用。

【讨论】：

【解决方案5】：

我们如何检查用户选择了图像文件？

通过文件扩展名验证
它按预期工作，带有.png 扩展名的文本文件在这里传递
input[type=file][accept=image/*] 它最初对用户隐藏non-image 文件。但是这个过滤器也可以通过扩展工作。用户仍然可以手动输入任何现有的文件名。

我们可以检查结果的 MIME 类型dataUrl，它以data:mimetype;base64,... 开头。所以，我们需要image/* mimetype。

var file = $('#uploadfile');
file.on('change', function (e) {
    var reader = new FileReader();

    reader.onload = function() {
        var data = reader.result;
        if (data.match(/^data:image\//)) {
            $('#thumbnail').attr('src', data);
        } else {
            console.error('Not an image');
        }
    };

    reader.readAsDataURL(file.prop('files')[0]);
});

【讨论】：

这不起作用，请更改无图像，例如.a pdf 到 .png，它以 data:image 开头，但不是实际图像。
没有图像源具有其他 MIME 类型。上面提到的pdf，有data:application/pdf，例如
@Phil，你用什么浏览器？我的 chrome 不使用文件扩展名进行 mime 类型识别。

【解决方案6】：

你可以这样试试

// Image upload validation
$(document).on('change', ':file',function () {
    const file = this.files[0];
    const fileType = file['type'];
    const validImageTypes = ['image/jpeg', 'image/png'];
    if (!validImageTypes.includes(fileType)) {
        alert('Only JPEG and PNG file types are allowed');
        this.value = '';
    }
});

【讨论】：