题 jQuery - INPUT type = File,Image FileType验证选项?


我有以下内容:

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

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

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

谢谢


15
2017-11-19 06:03


起源




答案:


您想要检查元素的值是什么,类似于:

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

编辑

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


26
2017-11-19 06:13



未捕获的TypeError:对象#<对象>没有方法'onchange' - AnApprentice
.change工作。但它仍然没有好处,因为它错误时,它仍然选择并在页面上显示文件。 - AnApprentice
添加这个工作,“。val('');”但我不知道那是多么顺从......任何人? - AnApprentice
.VAL( '');是一个jQuery调用,它所做的就是将元素的value属性设置为'' - 这与页面加载时相同。 - Jess Telford
对于谷歌; AFAIK并非所有浏览器都允许您重置文件输入的值。我发现最优雅的crossbrowser解决方案是 element.wrap('<form>').closest('form').get(0).reset(); element.unwrap(); - Maurice


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

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

9
2018-01-18 05:21



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


您可以使用正则表达式:

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

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


7
2017-11-19 06:08



如果有三个输入文件并且我想逐个验证它会怎么样? var val1=..., var val2=...  var val3 =...  if (!val.match(/(?:gif|jpg|png|bmp)$/)) { - alisa


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

但是因为这只适用于某些浏览器并且存在安全风险(在我看来)我不建议这样做,所以我的答案是: 你不能验证任何东西。

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


1
2017-11-19 06:08





我们如何检查,用户选择图像文件?

  • 通过文件扩展名验证
    它按预期工作,文本文件 .png 延伸通过这里
  • input[type=file][accept=image/*] 它最初隐藏 non-image 来自用户的文件。但是这个过滤器也适用于扩展。用户仍然可以手动输入任何现有的文件名。
  • 我们可以检查mime类型的结果 dataUrl,它始于 data:mimetype;base64,...。所以,我们需要 image/* 媒体类型。

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

1
2018-05-12 08:18