Image upload

Pallav · #1 (**permalink**) October 15th, 2004, 06:02 AM

Hi,
I want to allow the users of my application to
upload image files using the "<INPUT type="file"> tag...

however i want to restrict the size(both pixel size and file size)
of the images being uploaded using javascript..

I am able to do so in IE with the following code..
<script language="JavaScript">
function checkSize()
{

    im = new Image();
    im.src = document.Upload.submitfile.value;

    alert(im.width);
    alert(im.height);
    alert(im.fileSize);
}
</script>
<html>
<body>
   <form name="Upload" action="MyUploadServlet"
  enctype="multipart/form-data" method="post">

     <p>Filename: <INPUT type="file" name="submitfile" >
     <INPUT type="button" value="Send" onClick="checkSize()">

    </form>
</body>
</html>

The above code works perfectly in IE6 but not in Mozilla v 1.7.1.

Could anybody please tell me the script for doin wat i want in
mozilla..???

Thanks...
Pallav

bmains · #2 (**permalink**) October 15th, 2004, 07:25 AM

It is a little more browser-compatible to do:

document.getElementById('submitfile').value;

I don't know if it works in Mozilla though.

Brian

Snib · #3 (**permalink**) October 15th, 2004, 01:06 PM

Brian is correct, and document.getElementById works in Mozilla, Netscape, IE, Firefox, Opera and every other recent browser I know of.

However, remember to assign the id attribute to the file input, in this case the value would be 'submitfile'.

HTH!

-Snib <><
Try new FreshView 0.2!
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)

Pallav · #4 (**permalink**) October 18th, 2004, 01:29 AM

hi Brian,Snib

Thnx for replying..

I replaced the following line in my code

im.src = document.Upload.submitfile.value;

with what Brian suggested

i.e.
im.src = document.getElementById('submitfile').value;
(i also included the id='submitfile' attribute in the file tag)

This again wrks perfectly with IE6 but not with Mozilla v 1.7.1.

In mozilla im.width and im.height is alwayz 0,while im.filesize is undefined...

im.src is getting the required image file-path,but mozilla isn't able to get the image properties(heigth,width and filesize)

Could u please help me out..

Thanks.
Pallav.

bmains · #5 (**permalink**) October 18th, 2004, 07:14 AM

Hlelo,

You can't access the actual file in that manner. Remember that it is the input box in the form that you are accessing. To resize an image, you may be able to access it via javascript, but I'm not sure.

More than likely, you may need to use a server-side language for this.

Brian

Pallav · #6 (**permalink**) October 19th, 2004, 06:01 AM

Hi Brian ,
U seem to have misunderstood me.I don't want to resize an image.
I only want ot extract the image properties.
I am able to do so in IE6 but not in Mozilla v 1.7.1.

I guess if the javascript wrks in IE then there shud be a similar script for Mozilla too.

Pallav.

bmains · #7 (**permalink**) October 19th, 2004, 06:40 AM

In the previous code, I don't see an image element? If you wanted to do so, do:

document.getElementById('imageid').height = <value>

or document.getElementById('imageid').style.height = <value>

Brian

pgtips · #8 (**permalink**) October 19th, 2004, 08:01 AM

I believe that fileSize is a proprietary Microsoft addition.

Are you sure Moz is loading the image? (Afraid I don't have a copy of Moz so can't try it out)

Just for debug purposes, try adding an image tag to your page and setting the source of that to your input file. If that works OK add another button and see if you can get the h/w from the <img> tag. If this works then maybe the solution for Moz is to add a hidden img tag and use that to check the image dimensions. If it doesn't work, you will at least know which part doesn't work (loading the image or getting the size).

hth
Phil

Pallav · #9 (**permalink**) October 21st, 2004, 12:14 AM

Hi Brian,
I am using the <input type="file"> tag to upload an image and i want to get the image height,width and image filesize before uploading the image..

My code works perfectly in IE6 but not in Mozilla v1.7.1.
I am looking for a solution 4 Mozilla.

Phil,i hope u understood wat i want..

Pallav

Need to download code?

Navigation