jQuery 如何在不检查扩展名的情况下检查上传的文件是否为图像？

Question

新手在这里。问题是我目前已经编写了一种方法来检查上传的文件大小和扩展名以验证它。但是，检查扩展不是解决方案，因为这种验证可能会导致很多问题。我想要做的是检查实际文件类型并在不使用扩展方法的情况下对其进行验证。我曾尝试使用 jQuery 文件验证器 但无济于事……这是我当前代码的一个片段：

 <input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

脚本：

 App.Dispatcher.on("uploadpic", function() {
        $(":file").change(function() {
            if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/) ) {
                if(this.files[0].size>1048576) {
                    alert('File size is larger than 1MB!');
                }
                else {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            } else alert('This is not an image file!');
        });
        function imageIsLoaded(e) {
            result = e.target.result;
            $('#image').attr('src', result);
        };
    });

一旦上传输入发生变化，它就会被调用，并在验证后上传并显示图像。现在，我只关心验证，任何帮助或想法将不胜感激！

原文由 Acallar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情：

JavaScript

 const file = this.files[0];
const  fileType = file['type'];
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
if (!validImageTypes.includes(fileType)) {
    // invalid file type code goes here.
}

查询

var file = this.files[0];
var fileType = file["type"];
var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, validImageTypes) < 0) {
     // invalid file type code goes here.
}

原文由 Hoyen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你在这里不需要jquery。

 var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc...

//ie image/jpeg will be ['image','jpeg'] and we keep the first value
    if(mimeType.split('/')[0] === 'image'){
       console.log('the file is image');
    }

您还可以创建一个函数来检查文件何时为图像。

 function isImage(file){
   return file['type'].split('/')[0]=='image');//returns true or false
}

 isImage(this.file[0]);

更新(es6)

使用 es6 includes 方法，使其更加简单。

 const isImage = (file) => file['type'].includes('image');

原文由 Mike Antoniadis 发布，翻译遵循 CC BY-SA 4.0 许可协议