get image height and width in file tag using javascript

Question

Possible Duplicates:
get image height and width in file tag javascript
Determining image file size + dimensions via Javascript?
How to upload preview image before upload through JavaScript

how can i get the height and width of image without page refresh in file tag?

<HTML>
<HEAD>
    <TITLE></TITLE>
    <script language="javascript">
    function getW()
    {
        var theImg = document.getElementById('testimg');
        alert(theImg.width);
    }

    function getH()
    {
        var theImg = document.getElementById('testimg');
        alert(theImg.height);
    }
    </script>
</HEAD>

<BODY>        
<input type="file" id="testimg"/>
    <input type="button" value="get Width" onclick="getW()"/>
    <input type="button" value="get Height" onclick="getH()"/>
</BODY>
</HTML>

i get the image height and width of image using php code, but that time page will be refreshed, without page refresh i get image size but not a height and width....

lolwut? 2 questions like this one after another? http://stackoverflow.com/questions/6633190/get-image-height-and-width-in-file-tag-javascript — Pwnna, Jul 09 '11 at 06:37
http://stackoverflow.com/questions/4094012/how-to-upload-preview-image-before-upload-through-javascript http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript — AmdY, Jul 09 '11 at 06:44

score 0 · Answer 1 · answered Jul 09 '11 at 06:42

Use the onload event:

document.getElementById('testimg').onload = function() {
  alert(document.getElementById('testimg').offsetHeight);
}

You can change the action in the function, for example, making your buttons visible, or un-disabled, up to you.

Not sure I understand your question, but Javascript will need to load the image before you can get its dimensions.

score 0 · Answer 2 · answered Jul 09 '11 at 06:43

This is impossible to do in a cross-browser way.

The only cross-browser way that comes to my mind (but is not simple) is to upload the file ajax style, render that image (could be hidden) and get its size with img.width and img.height.

Hope this helps. Cheers

get image height and width in file tag using javascript

2 Answers2

Linked

Related