Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old October 15th, 2004, 06:02 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default Image upload

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
  #2 (permalink)  
Old October 15th, 2004, 07:25 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: Harrisburg, PA, USA.
Posts: 1,998
Thanks: 0
Thanked 3 Times in 3 Posts
Default

It is a little more browser-compatible to do:

document.getElementById('submitfile').value;

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

Brian
  #3 (permalink)  
Old October 15th, 2004, 01:06 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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 ;)
  #4 (permalink)  
Old October 18th, 2004, 01:29 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
  #5 (permalink)  
Old October 18th, 2004, 07:14 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: Harrisburg, PA, USA.
Posts: 1,998
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #6 (permalink)  
Old October 19th, 2004, 06:01 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
  #7 (permalink)  
Old October 19th, 2004, 06:40 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: Harrisburg, PA, USA.
Posts: 1,998
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #8 (permalink)  
Old October 19th, 2004, 08:01 AM
Friend of Wrox
 
Join Date: Jun 2003
Location: , , United Kingdom.
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

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
  #9 (permalink)  
Old October 21st, 2004, 12:14 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Upload image-create & save thumbnail-display image angshujit ASP.NET 2.0 Professional 6 July 11th, 2013 10:34 PM
how to upload image? vipin k varghese BOOK: XSLT Programmer's Reference, 2nd Edition 3 June 3rd, 2008 02:53 AM
Upload image phuc2583 Classic ASP Basics 1 January 17th, 2008 08:48 AM
Image Upload spbharti Pro PHP 3 February 3rd, 2006 08:20 AM
Image upload cutesneakers PHP How-To 2 January 5th, 2005 08:00 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.