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

上传输入更改后调用它,验证后上传并显示图像.现在,我只关心验证,任何帮助或想法将不胜感激!

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.
}

jQuery的

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.
}

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');

Answer 3

请在此处参考相关查询。此处的答案建议将图像加载到 Image 对象中，并检查其宽度和高度属性是否为非零。我认为该技术也可用于解决您的问题。

我还制作了一个小提琴供您参考。相关代码如下：

var img = new Image();
img.addEventListener("load",function(){
  alert('success');
});
img.addEventListener("error",function(){
      alert('error');
});
  img.src = picFile.result; 

Answer 4

如果您只是想知道文件是否是图像,这是一个快速提示:

var file = this.files[0];
var fileType = file["type"];

if (fileType.search('image') >= 0) {
  ...
}