Javascript獲取圖像的高度？

你好，我有下面的代碼，從輸入獲取文件，圖像，並將其張貼到PHP它都工作得很好，但我想先找到圖像的高度和寬度。我該怎麼做呢？這裏是我的代碼：Javascript獲取圖像的高度？

$(':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; 
    } 
}

我嘗試使用

file.width;

，但它沒有工作，有人可以幫我嗎？ 編輯：我想獲得圖像的高度，而它仍然在輸入字段。

來源

2016-11-28 Jelly

你可以得到這個工作在PHP中。 – Perumal

@ Perumal93即使如此，也沒有必要。如果op想要使用JS，就這樣吧 –

@DarylGill好的。 – Perumal

你可以試試這個代碼：

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; 
    }; 
});

以後，您可以使用變量imageWidth和imageHeight內doit()功能進行驗證。

因此，你的整個代碼如下所示：

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

最後，我對你的建議是堅持與編碼規範。它可以幫助你使代碼更容易閱讀。

來源

2016-11-28 17:45:30 Perumal

Javascript獲取圖像的高度？

回答

相關問題