jQuery如何在不检查扩展名的情况下检查上传的文件是否是图像？
新手在这里。 问题是我目前已经编写了一个检查上传文件大小和扩展名的方法，以便对其进行validation。 但是，检查扩展名不是解决方案，因为这种validation可能会导致很多问题。 我想要做的是检查实际的文件类型并validation它而不使用扩展方法。 我曾尝试使用jQuery文件validation器，但无济于事……这是我当前代码的一个片段：
脚本：
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); }; });
上传输入更改后调用它，validation后上传并显示图像。 目前，我只关心validation，任何帮助或想法将不胜感激！
尝试这样的事情：
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. }
你这里不需要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');
如果您只是想知道文件是否是图像，这是一个快速提示：
var file = this.files[0]; var fileType = file["type"]; if (fileType.search('image') >= 0) { ... }
我想要做的是检查实际的文件类型
尝试访问files[0].type属性。 请参阅使用Web应用程序中的文件
$(":file").on("change", function(e) { console.log(this.files[0].type); })
请在此处参考相关查询。 这里的答案建议将图像加载到Image对象中，并检查它的宽度和高度属性是否为非零。 我认为该技术也可用于解决您的问题。
我也找了一个小提琴供你参考。 以下相关代码：
var img = new Image(); img.addEventListener("load",function(){ alert('success'); }); img.addEventListener("error",function(){ alert('error'); }); img.src = picFile.result;
如果有人来到这里使用jQuery Validator，一个简单的方法是：
jQuery.validator.addMethod( "onlyimages", function (value, element) { if (this.optional(element) || !element.files || !element.files[0]) { return true; } else { var fileType = element.files[0].type; var isImage = /^(image)\//i.test(fileType); return isImage; } }, 'Sorry, we can only accept image files.' );
然后将其添加到.validate（）函数中。