Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old October 15th, 2004, 07: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
Reply With Quote
  #2 (permalink)  
Old October 15th, 2004, 08: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
Reply With Quote
  #3 (permalink)  
Old October 15th, 2004, 02:06 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 1 Time in 1 Post
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 ;)
Reply With Quote
  #4 (permalink)  
Old October 18th, 2004, 02: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.
Reply With Quote
  #5 (permalink)  
Old October 18th, 2004, 08: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
Reply With Quote
  #6 (permalink)  
Old October 19th, 2004, 07: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.
Reply With Quote
  #7 (permalink)  
Old October 19th, 2004, 07: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
Reply With Quote
  #8 (permalink)  
Old October 19th, 2004, 09: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
Reply With Quote
  #9 (permalink)  
Old October 21st, 2004, 01: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
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 11:34 PM
how to upload image? vipin k varghese BOOK: XSLT Programmer's Reference, 2nd Edition 3 June 3rd, 2008 03: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



All times are GMT -4. The time now is 07:50 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.