jQueryプラグインを使用して画像の寸法を検証する

Question

jQueryの検証プラグインで検証が行われるフォームがあります。私のフォームには、入力タイプ=ファイルと送信ボタンという2つの要素があります。ユーザーが画像を選択し、画像が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" 
    }, 
    } 

}); 

Answer 1

あなたは<img>要素にイメージファイルをロードし、その要素の幅を取得することができます。

$.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."; 
}); 

注：

<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> 

---

次に、カスタム検証メソッドを定義します。

---

まず<img>要素を保持するために、あなたのHTMLにコンテナ要素を追加します

1. ご覧のとおり、ファイル入力要素で.data('imageWidth')を呼び出すと、画像の幅を取得できると予想されます。以下のコードでその値を設定します。
2. また、.data('imageWidth')がundefinedを返す場合、選択されたファイルはイメージではないことを前提としています。 <img>要素を作成し、それを追加し、ファイル入力のための変更イベントハンドラを追加し、最後に

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

   ---

   ：あなたは今、このようminImageWidthメソッドを使用することができます

---

コンテナまた、ファイル入力要素の値を.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); 
    } 
}); 

注意：画像がロードされると

1. 、その幅は、ファイル入力要素に.data('imageWidth')値として配置されています。
2. イメージがロードされている間、送信ボタンは無効になっているため、ユーザーはフォームを送信できません。
3. 検証は、イメージがロードされた直後に実行されます。つまり、ユーザーは、エラーメッセージが表示されるために[送信]ボタンをクリックする必要はありません。これはvalidator.element()への呼び出しによって実行されます。
4. DOMに追加されるまで、<img>要素の幅を取得することはできません。また、表示する必要がありますが、上記のコードは、必要に応じてどのように隠すことができるかを示しています。

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