首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery如何在不检查扩展名的情况下检查上传的文件是否为图片?

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

Stack Overflow用户
提问于 2015-04-23 02:23:28
回答 5查看 102.6K关注 0票数 33

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

代码语言:javascript
复制
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

脚本:

代码语言:javascript
复制
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);
        };
    });

一旦上传输入发生变化,它就会被调用,在验证之后,它会上传并显示图像。现在,我只关心验证,任何帮助或想法都会非常感谢!

EN

回答 5

Stack Overflow用户

发布于 2015-04-23 03:00:16

请参考相关的查询here。这里的答案建议将图像加载到image对象中,并检查其宽度和高度属性是否为非零。我认为这个技术也可以用来解决你的问题。

我还制作了一个fiddle供您参考。相关代码如下:

代码语言:javascript
复制
var img = new Image();
img.addEventListener("load",function(){
  alert('success');
});
img.addEventListener("error",function(){
      alert('error');
});
  img.src = picFile.result; 
票数 7
EN

Stack Overflow用户

发布于 2017-11-07 20:58:43

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

代码语言:javascript
复制
var file = this.files[0];
var fileType = file["type"];

if (fileType.search('image') >= 0) {
  ...
}
票数 6
EN

Stack Overflow用户

发布于 2018-06-07 21:50:38

如果有人来这里使用jQuery验证器,一个简单的方法是:

代码语言:javascript
复制
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()函数中。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29805909

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档