jQuery - INPUT type = File，Image FileType验证选项？

Posted 2021-04-24

我有以下内容：

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

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

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

谢谢

答案

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

$("#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;
    }
});

编辑

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

另一答案

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

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

另一答案

您可以使用正则表达式：

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!");
}

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

另一答案

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

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

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

另一答案

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

• 通过文件扩展名验证 它按预期工作，带有.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]); });

另一答案

你可以这样试试

// 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 = '';
    }
});