Javascript Imageの高さを取得しますか？

Question

こんにちは私は入力からファイル、イメージを取得し、それがすべて素晴らしい作品をPHPに投稿する次のコードを持っていますが、まず画像の高さと幅を探したいと思います。これはどうすればいいですか？ 、私は

file.width; 

を使用してみましたが、それはうまくいきませんでした

$(':file').change(function(){ 
    file = this.files[0]; 
}); 

function doit(){ 
    var formData = new FormData($('form')[0]); 
    //console.log(dataObj); 



    if(file.name.length < 1) { 
     TooBig = true 
    } 
    else if(file.size > 1000000) { 
     TooBig = true 
    } 
    else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') { 
     TooBig = true 
     console.log("done"); 
    }else{ 
     TooBig = false 
    } 

    if(TooBig == false){ 
     document.getElementById('submitbtn').innerHTML = 'Uploading'; 
     $.ajax({ 
      url: 'saveImage.php', 
      type: 'POST', 
      data: formData, 
      processData: false, 
      contentType: false, 
      success: function(data){ 
       console.log(data); 
       nextID = data;  
       cancel2();  
      } 

     }); 
    }else{ 
     document.getElementById('thumbage2').value = ""; 
     document.getElementById('labelthumb2').innerHTML = ''+height; 
    } 
} 

誰かが私を助けることができます：ここに私のコードはありますか？ EDIT：まだ入力フィールドにある間、イメージの高さを取得したいと思います。

Answer 1

あなたは、このコードを試してください：

var imageWidth = null; 
var imageHeight = null; 

$(':file').change(function(){ 
    var windowURL = window.URL || window.webkitURL; 
    var file = this.files[0]; 
    var image = new Image(); 
    image.src = windowURL.createObjectURL(file); 
    image.onload = function() { 
     imageWidth = this.width; 
     imageHeight = this.height; 
    }; 
}); 

後で、検証のためにdoit()関数の内部変数imageWidthとimageHeightを使用することができます。

したがって、あなたの全体のコードは次のようになります。

var imageWidth = null; 
var imageHeight = null; 

$(':file').change(function(){ 
    var windowURL = window.URL || window.webkitURL; 
    var file = this.files[0]; 
    var image = new Image(); 
    image.src = windowURL.createObjectURL(file); 
    image.onload = function() { 
     imageWidth = this.width; 
     imageHeight = this.height; 
    }; 
}); 

function doit(){ 
    var formData = new FormData($('form')[0]); 
    //console.log(dataObj); 



    if(file.name.length < 1) { 
     TooBig = true; 
    } 
    else if(file.size > 1000000) { 
     TooBig = true; 
    } 
    else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') { 
     TooBig = true; 
     console.log("done"); 
    } else if(imageWidth > 1700 && imageHeight > 1300) { 
     TooBig = true; 
    } else{ 
     TooBig = false; 
    } 

    if(TooBig == false){ 
     document.getElementById('submitbtn').innerHTML = 'Uploading'; 
     $.ajax({ 
      url: 'saveImage.php', 
      type: 'POST', 
      data: formData, 
      processData: false, 
      contentType: false, 
      success: function(data){ 
       console.log(data); 
       nextID = data;  
       cancel2();  
      } 

     }); 
    }else{ 
     document.getElementById('thumbage2').value = ""; 
     document.getElementById('labelthumb2').innerHTML = ''+height; 
    } 
} 

最後に、あなたのための私の提案は、コーディング規則に固執しています。コードを読みやすくするのに役立ちます。