使用 jQuery 插件验证图像尺寸

Posted 2023-05-07

【中文标题】使用 jQuery 插件验证图像尺寸

【英文标题】：Validating image dimensions using jQuery plugin

【发布时间】：2021-07-03 21:24:56

【问题描述】：

我有一个表单，在 jQuery 的验证插件中进行验证。我的表单包含两个元素，一个 input type=file 和一个提交按钮。用户将选择一个图像，如果该图像小于 500 像素，则不会被接受，并且应该显示错误消息。我为此制定了一种新方法，称为宽度，但由于某种原因它不起作用。当我尝试提交小于 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"
    ,
  

);

【问题讨论】：

图像宽度本身不会神奇地出现在元素数据中。需要先自己处理图片文件

@charlietfl 我该怎么做？

需要使用FileReader API

@charlietfl 我如何将 FileReader 的使用与 jQuery 验证插件结合起来？

我添加到您的jsfiddle 以让您更进一步。它现在将所选图像加载到新的<img> 元素中。您现在必须将其绑定到 JQuery Validator 方法中。

【参考方案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方法：

$.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') 返回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

【讨论】：

很好的答案！非常感谢！

@user2896120 - 我对我的回答做了一些改进：（1）如果所选文件不是图像，它现在会显示不同的错误消息，并且（2）现在在文件被选中。

看起来很棒，效果也很好！如果要添加高度验证，是否需要添加另一个 addMethod()？

@user2896120 - 你可以选择任何一种方式。您可以添加minImageHeight 方法，也可以将minImageWidth 方法更改为minImageSize 方法like this。

我有一个动态克隆多次的表单。有没有办法让每种形式都有自己的形象？为了不让您感到困惑，这里还有一个问题是您提供给我的代码，在我的工作中使用：(***.com/questions/38416454/…)