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获取图像的高度？

回答

相关问题