HTML5フォームチェック画像の幅と高さと警告大きな

Question

EDIT

重複し

は、ファイルのサイズが次元で大きなない場合はフォーム送信を停止する必要がない場合他の投稿のいくつかの回答はファイルサイズに関するものですが、私の質問は次元に関するものです。サイズと寸法は2種類です...

私は画像をアップロードするために次のフォームを使用しています。それはうまくいきますが、それは店舗であり、製品のカタログがすばらしく見えるようにするために、正確に200ピクセル幅と200ピクセルの高さにアップロードされた画像が必要です。画像の幅や高さが大きい場合は、アップロードする人が別の画像を選択するか、アップロードしようとしている画像を編集するように警告を表示する必要があります。

<form action="upload" enctype="multipart/form-data" method="post"> 

    Upload image: 
    <input id="image-file" type="file" name="file" /> 
    <input type="submit" value="Upload" /> 

    <script type="text/javascript"> 
     $('#image-file').bind('change', function() { 
      alert('here we have to do something'); 
     }); 
    </script> 

</form> 

Answer 1

可能な重複はありますか？ここの回答から撮影し、あなたのために適した：

Is it possible to check dimensions of image before uploading?

私は上記の答えに同意するだろうし、フォーム上でそれを行う提出：私の中の答えとして

$(document).ready(function() { 
 
$("#ImageForm").submit(function(e) { 
 
    var form = this; 
 
    e.preventDefault(); //Stop the submit for now 
 
           //Replace with your selector to find the file input in your form 
 
    var fileInput = $(this).find("#image-file")[0], 
 
     file = fileInput.files && fileInput.files[0]; 
 
\t console.log(file) 
 
    if(file) { 
 
     var img = new Image(); 
 

 
     img.src = window.URL.createObjectURL(file); 
 

 
     img.onload = function() { 
 
      var width = img.naturalWidth, 
 
       height = img.naturalHeight; 
 

 
      window.URL.revokeObjectURL(img.src); 
 

 
      if(width <= 200 && height <= 200) { 
 
       form.submit(); 
 
      } 
 
      else { 
 
       alert('too big'); 
 
      } 
 
     }; 
 
    } 
 
    else { //No file was input or browser doesn't support client side reading 
 
     form.submit(); 
 
    } 
 

 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="ImageForm" method="post"> 
 

 
    Upload image: 
 
    <input id="image-file" type="file" name="file" /> 
 
    <input type="submit" value="Upload" /> 
 
</form>

をリンクでは、このサーバー側もa）クライアントを信頼することはできません。b）古いブラウザが動作しない可能性があることを確認する必要があります。