How to get the size of the image which is uploaded by

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?

what do you mean by proper size, are you talking about image dimensions or image file size? — Sreekanth, Nov 29 '16 at 03:54
duplicate of http://stackoverflow.com/questions/7497404/get-file-size-before-uploading http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — Gaurav joshi, Nov 29 '16 at 03:57
You should use `URL.createObjectURL(file)` instead of using the FileReader — Endless, Nov 29 '16 at 18:32

Trash Can · Accepted Answer · 2016-11-29T04:31:34.167

3

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

edited Nov 29 '16 at 04:31

answered Nov 29 '16 at 04:09

Trash Can

6,608
5
24
38

Thanks for your answer. I've already tried the code like yours. The question is that I can't get path or url from "input". – ZeroZerg Nov 29 '16 at 04:12
I think your new code should work. I'll try it. Thanks – ZeroZerg Nov 29 '16 at 04:13
Javascript does not allow you to access the path to the uploaded files as far as I know. You can only access the file names, but not the full path – Trash Can Nov 29 '16 at 04:13
I got two "0"... It seem that Image is not ready immediately. Then I tried image.onload=function(){console.log(image.naturalWidth, image.naturalHeight);}; nothing is printed. – ZeroZerg Nov 29 '16 at 04:22
Glad I could help – Trash Can Nov 29 '16 at 05:50

score 0 · Answer 2 · answered Nov 29 '16 at 04:00

0

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>

answered Nov 29 '16 at 04:00

Samudrala Ramu

2,088
1
15
36

If I use your code. I have to upload the image first then get the url or path of the image and set it to "img.src". It should be a little redundant which I have to upload it to server and download it from sever. I think it can be done locally. If I think wrong, please correct me. – ZeroZerg Nov 29 '16 at 04:06

score 0 · Answer 3 · answered Nov 29 '16 at 05:42

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

}

How to get the size of the image which is uploaded by

3 Answers3