使用 jQuery 插件验证图像尺寸

Question

我有一个表单，其中验证发生在 jQuery 的验证插件中。我的表单包含两个元素，一个输入类型=文件和一个提交按钮。用户将 select 一张图片，如果该图片小于 500px，则不会被接受并显示一条错误消息。我为这个称为宽度的方法创建了一个新方法，但由于某种原因它不起作用。当我尝试提交小于 500 像素的图像时，不会显示错误消息。这是我的 jsfiddle.

HTML

<form class="some_form" enctype="multipart/form-data" method="post" action="">
  <input type="file" name="photo" id="photoInput" />
  <input type="submit">
</form>

jQuery

$.validator.addMethod('width', function(value, element) {
  if ($(element).data('width')) {
    return $(element).data('width') >= 500;
  }

  return true;
}, 'Image needs to be wider than 500px');

$(".some_form").validate({
  rules: {
    photo: {
      required: true,
      width: 500
    }

  },

  messages: {
    photo: {
      required: "You must insert an image",
      width: "Your image's width must be greater than 500px"
    },
  }

});

Answer 1

您可以将图像文件加载到 <img> 元素中，然后获取该元素的宽度。

首先向您的 HTML 添加一个容器元素以容纳 <img> 元素：

<form class="some_form" enctype="multipart/form-data" method="post" action="">
  <input type="file" name="photo" id="photoInput" />
  <input type="submit">
</form>
<div id="imgContainer"></div>

接下来，定义自定义验证器方法：

$.validator.addMethod('minImageWidth', function(value, element, minWidth) {
  return ($(element).data('imageWidth') || 0) > minWidth;
}, function(minWidth, element) {
  var imageWidth = $(element).data('imageWidth');
  return (imageWidth)
      ? ("Your image's width must be greater than " + minWidth + "px")
      : "Selected file is not an image.";
});

备注：

如您所见，该方法期望它可以通过在文件输入元素上调用 .data('imageWidth') 来获取图像宽度。我们将在下面显示的代码中设置该值。
此外，该方法假定当.data('imageWidth') returns undefined时，所选文件不是图像。

您现在可以像这样使用 minImageWidth 方法：

var validator = $('.some_form').validate({
  rules: {
    photo: {
      required: true,
      minImageWidth: 500
    }
  },
  messages: {
    photo: {
      required: "You must insert an image"
    },
  }
});

最后，为创建 <img> 元素并将其添加到容器的文件输入添加更改事件处理程序。它还将在文件输入元素上设置 .data('imageWidth') 值。

var $submitBtn = $('.some_form').find('input:submit'),
  $photoInput = $('#photoInput'),
  $imgContainer = $('#imgContainer');

$('#photoInput').change(function() {
  $photoInput.removeData('imageWidth');
  $imgContainer.hide().empty();

  var file = this.files[0];

  if (file.type.match(/image\/.*/)) {
    $submitBtn.attr('disabled', true);

    var reader = new FileReader();

    reader.onload = function() {
      var $img = $('<img />').attr({ src: reader.result });

      $img.on('load', function() {
        $imgContainer.append($img).show();
        var imageWidth = $img.width();
        $photoInput.data('imageWidth', imageWidth);
        if (imageWidth < 500) {
          $imgContainer.hide();
        } else {
          $img.css({ width: '400px', height: '200px' });
        }
        $submitBtn.attr('disabled', false);

        validator.element($photoInput);
      });
    }

    reader.readAsDataURL(file);
  } else {
    validator.element($photoInput);
  }
});

备注：

加载图像时，其宽度作为 .data('imageWidth') 值放置在文件输入元素上。
图片加载时，提交按钮被禁用，因此用户无法提交表单。
图像加载后立即执行验证。也就是说，用户不必单击提交按钮来显示错误消息。这是通过调用 validator.element().
在将 <img> 元素添加到 DOM 之前，您无法获取它的宽度。它也必须是可见的，但上面的代码显示了如何在需要时立即隐藏它。

jsfiddle

参考文献：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
jquery validation plugin, how to add multiple custom messages in custom method

使用 jQuery 插件验证图像尺寸

Validating image dimensions using jQuery plugin

javascript

jquery

jquery-validate