アップロード前の画像のサイズを確認してください

Question

アップロードを承認する前に画像の寸法を確認する必要があります。下記のコードをご覧ください。

何らかの理由で「check」パラメータが設定されず、checkImage関数が常にfalseを返します。

フォーム要素...

<input type="file" name="bg_image" id="bg_image" accept=".jpg, .png, .gif" /> 

jQueryの検証方法、ルール及びメッセージ...

jQuery.validator.addMethod("check_size",checkImage); 

function runFormValidation() { 
    var $myForm= $('#reg-form').validate({ 
     rules: { 
      bg_image: { 
       check_size: 720 
      }, 
     }, 
     messages: { 
      bg_image: { 
       check_size: 'Image Dimension MUST be more than 720px*720px.' 
      }, 
     }, 
    }); 
}; 

実際のcheckImage機能...

function checkImage(value, element, min_size) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       if (height < min_size || width < min_size) 
        { check=1; } 
       else { check=2; } 
      }; 
     } 
    } 
    if (check==2) { return true; } // Doesn't Work - "check" didn't get set as I wish 
    return false; 
}; 

Answer 1

'check'の値はイメージがロードされた後に設定されるため、値が設定される前にif（check == 2）が実行されます。

イメージのロード後に残りのコードが機能し、適切な値で再度チェックが行われますが、関数が誤った値を返しています。

値を返すまで待機する必要があります。つまり、image.onload関数で戻り値が返されるはずです。

（私はまだコメントできないとして、私は...この回答に追加し続ける）

ない完全な答えが、コメントで何とか

function checkImage(value, element, min_size) 
{ 
    var check = 0, 
     returnValue; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       if (height < min_size || width < min_size) 
        { returnValue = false; } 
       else { returnValue = true; } 
      }; 
     } 
     /* as long as returnValue === undefined, do nothing, else 
      return returnValue*/ 
    } else { 
     return false; 
    } 
}; 

しかし、最高のでしょう何をすべきかロード関数の準備が整った後、結果を表示する関数を実行して、待たなければならない値を返すことです。

コンソールロギングと私の機能を更新

Answer 2

...

function checkImage(value, element, param) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       console.log("Print dimension : " + height + " X " + width); 
       if (height < 720 || width < 720) 
        { check=1; console.log("inside check = 1"); } 
       else { check=2; console.log("inside check = 2"); } 
      }; 
     } 
    } 
    console.log("outside check value = " + check); 
    if (check==2) { return true; } 
    return false; 
}; 

私は小さな寸法の画像でテストすると、ここではコンソールログのシーケンスがある...

VM1207:149 outside check value = 0 
VM1207:142 Print dimension : 498 X 696 
VM1207:144 inside check = 1 

ちょうどそれを作るためにより完全な、次のコード（image.onloadで復帰しています）は動作しませんでした。

function checkImage(value, element, param) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       console.log("Print dimension : " + height + " X " + width); 
       if (height < 720 || width < 720) 
        { check=1; console.log("inside check = 1"); return false; } 
       else { check=2; console.log("inside check = 2"); return true; } 
      }; 
     } 
    } 
    // console.log("outside check value = " + check); 
    // if (check==2) { return true; } 
    // return false; 
}; 

私は関数のために戻る前に "チェック"を設定しますか？