Web Analytics Made Easy -
StatCounter Getting an image's height and width - CodingForum

Announcement

Collapse
No announcement yet.

Getting an image's height and width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Getting an image's height and width

    I have a form where users can browse to an image on their hard drive [input type="file"] to select for upload. When they select the image, is it possible to pull the image's height and width into the corresponding form fields?

    Here is my form:
    Code:
    <form>
    <div class="label">Photo:</div>
    <input type="file" style="width:300px;" name="photo" id="photo" />
    <div class="label"><nobr>Width <small>[px]</small>:</nobr></div>
    <input type="text" style="width:25px;" name="imgwidth" id="imgwidth" readonly="readonly" /> 
    <div class="label"><nobr>Height <small>[px]</small>:</nobr></div>
    <input type="text" style="width:25px;" name="imgheight" id="imgheight" readonly="readonly" />
    </form>
    Last edited by CrazyCoder; Oct 9, 2006, 06:00 PM. Reason: error
    • Jesus called. He says He misses you.

  • #2
    dynamicly add a new image to the document, check it's width &amp; height.

    I know this isn't exactly what you asked for (populating form elements),
    but you should be able to modify my script for your purpose.

    This should give you an idea of how to do it:
    Code:
    <html>
    <head><title>Image info</title>
    <script type="text/javascript">
    var myHolder, myFile, imageWidth, imageHeight, un = "undefined";
    function getImageInfo(){
    	if (typeof myFile == un)myFile = document.getElementById("myFile");
    	if (typeof imageWidth == un)imageWidth = document.getElementById("imageWidth");
    	if (typeof imageHeight == un)imageHeight = document.getElementById("imageHeight");
    	if (typeof myHolder == un)myHolder = document.getElementById("myHolder");
    	myHolder.removeChild(myHolder.firstChild);
    	var img = document.createElement("img");
    	myHolder.appendChild(img);
    	img.onload = function(){
    		imageWidth.removeChild(imageWidth.firstChild);
    		imageWidth.appendChild(document.createTextNode(img.width));
    		imageHeight.removeChild(imageHeight.firstChild);
    		imageHeight.appendChild(document.createTextNode(img.height));
    	}
    	img.onerror = function(){
    		imageWidth.removeChild(imageWidth.firstChild);
    		imageWidth.appendChild(document.createTextNode("error"));
    		imageHeight.removeChild(imageHeight.firstChild);
    		imageHeight.appendChild(document.createTextNode("error"));
    	}
    	img.setAttribute("src", "file:///"+myFile.value.replace(/\\/g,'/'));
    }
    </script>
    </head>
    <body>
    Photo:<br>
    <input type="file" style="width:500px" id="myFile" onchange="getImageInfo()" /><br />
    Width: <span id="imageWidth">&nbsp;</span><br />
    Height: <span id="imageHeight">&nbsp;</span>
    <div id="myHolder" style="visibility:hidden">&nbsp;</div>
    </body>
    </html>

    Comment


    • #3
      VortexCortex you rock! This was exactly what I was looking for. It would have taken me forever to figure this out, especially since I was completely on the wrong track.

      Thanks for the help!
      • Jesus called. He says He misses you.

      Comment

      Working...
      X