Question

我有以下内容：

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

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

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

由于

Answer 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;
    }
});

修改

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

Answer 2

非常简单，不需要任何JavaScript验证。只需写下它，它就会只接受图像文件。

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

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

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

Answer 4

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

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

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

Answer 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]);
});

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

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

6 个答案: