如何使用jQuery验证文件输入上传的图像大小?

时间:2017-01-16 18:42:09

标签: javascript jquery forms validation

我有以下'file'类型的输入字段:

<input id="company_logo" name="company_logo" type="file" accept="image/png,image/jpg,image/jpeg">
<img id="logo_preview" src="#" alt="Your Logo" />

一旦选择了有效文件,我将使用以下代码预览上传的图像:

$("#company_logo").change(function() {
            displayUploadedLogo(this);
        });

function displayUploadedLogo(input) {
        if (input.files && input.files[0]) {

            var file = input.files[0];
            var fileType = file["type"];
            var ValidImageTypes = ["image/jpg", "image/jpeg", "image/png"];

            if ($.inArray(fileType, ValidImageTypes) > 0) {

                // If uploaded image is within array of valid image types
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#logo_preview')
                        .attr('src', e.target.result)
                        .width(75)
                        .height(75)
                        .css('display', 'block');
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                // Uploaded file is not an image
                $('#logo_preview').css('display', 'none');
            }
        }
    }

这基本上有效,但我想另外验证所选图像具有特定图像尺寸(例如200 x 200像素)。不符合尺寸要求(更大或更小)的图像应该被拒绝并带有错误消息。

非常感谢您的建议如何解决这个问题。

0 个答案:

没有答案