Question

I have added multiple image upload to my site using HTML api’s. I have to test each images while uploading, whether they tall (height>width) or long(height

<script type="text/JavaScript">
function filesProcess(files) 
{
  var shape=document.getElementById('shapeval').value;
  for( var i = 0; i < files.length; i++) 
    {
        file = files[i];
        if(!file.type.match(/image.*/)) 
            {


            alert('File name '+file.name+' is not allowed! Please try again!');

            window.location.reload(true);

                continue; //Jump forward to the next file...

                }
      else
        { 
                var iw=document.images[i].width;
            var ih=document.images[i].height;
            var n=document.images[i].name;
            if(shape="tall")
                {

                    alert("width:"+iw+" and height:"+ih);
                }
                else
                {

                    alert("width:"+iw+" and height:"+ih);
                }
            continue;
        }

    }


}
 </script>

HTML

  <form action="upload.php/" method="post" enctype="multipart/form-data" name="uploadForm" onsubmit="return(validate());">
  <input type="file" id="files" name="files[]" multiple  onchange="filesProcess(this.files);" accept="image/*"/>
   <input type="hidden" name="shapeval" id="shapeval" value="tall" />
  </form>

Using this code width and height are displaying, but the value of them are not correct. Most of the time it’s showing 182 and 51 for both type of images; So I couldn’t recognize the images are tall or long? Where I did mistake? Am I missing something?Anyone have any idea??

Thanks!

Answer 1

As far as I know, you can’t get the height or width of an image you are about to upload thru Javascript. You will need to upload it to the server and then use PHP (or any other server-side scripting language) to get information about the image. Try the PHP function getimagesize(), it should give you the information you need.

If you’re wanting to process the image inline and kick back information to the user, I would suggest submitting the form with AJAX and using the response data.