How to get the size of the image which is uploaded by <input>

Question

  function changeFile() { var preview = document.getElementById("previewDiv"); preview.style.backgroundImage = ""; var element = document.getElementById("ads_files"); var files = element.files; var file = files[0]; console.log(file); var reader = new FileReader(); reader.onload = loadFinished; reader.readAsDataURL(file); function loadFinished(event) { var data = event.target.result; preview.style.backgroundImage = 'url(' + data + ')'; } } 

 #previewDiv { border: 2px solid rgb(204, 204, 204); width: 250px; height: 200px; background-size: 100% 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="ads_files" name="file" onchange=changeFile() /> <div id="previewDiv"> </div> 

The code above is to upload a picture and show it as the background of div. It works perfectly.

Now I wish to upload the picture with proper width and height. So I need to get the size of the upload picture (The other pictures won't be uploaded to server).

I've searched some solutions on internet. It seems that document.getElementById("ads_files").value may get the path of the file after the image is uploaded. Then use Image.src=document.getElementById("ads_files") to load the image and get the size with function of Image.

But the question is that the value is a fake path like c:\\fakepath\\10256530_503531203106865_63236440322903725_n.jpg (I'm using Mac!!!!). Of course the program won't work.

I bet the work can be done locally but I don't know how to do it.

Any good idea?

Answer 1

Here is how you retrieve the image dimensions, add these to your loadFinished() function

var image = new Image();
image.src = data;
image.onload = function() {
    console.log(image.naturalWidth, image.naturalHeight);
}

Answer 2

Try It Once

  function imgSize(){ var myImg = document.querySelector("#sky"); var realWidth = myImg.naturalWidth; var realHeight = myImg.naturalHeight; alert("Original width=" + realWidth + ", " + "Original height=" + realHeight); } 

  <img src="http://files.codepedia.info/uploads/2015/08/getFileName_size.jpg" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu"> <p><button type="button" onclick="imgSize();">Get Original Image Size</button></p> 

Answer 3

May Be this can help you

function changeFile() {

var preview = document.getElementById("previewDiv");
preview.style.backgroundImage = "";

var element = document.getElementById("ads_files");
var files = element.files;

var file = files[0];

console.log(file);
/*Code here to show width on console*/
console.log($(element).width());    

var reader = new FileReader();
reader.onload = loadFinished;
reader.readAsDataURL(file);

function loadFinished(event) {
var data = event.target.result;
preview.style.backgroundImage = 'url(' + data + ')';        
}  

}