Preview image before upload.

[miarte]

I have a form to allow the user upload images.
The user browse for an image in their computer and click open, th
image to be upload is preview on the img tag.
The script works fine with IE, but does not work with mozilla Netscap
bowsers.
Does anyone knows what could be the problem?
Does the ONchange function works in Netscape?
Or anyone knows a tag that can preview the image file before uploadin
it.

<script language="JavaS cript" type="text/JavaScript">
function preview(thisImg ,thisObj)
{

var filename = "";
var nothing = "";
filename = "file:\/\/"+thisObj.value ;

var fileExtension
filename.substr ing(filename.la stIndexOf(".")+ 1);
if (fileExtension == "jpg" || fileExtension == "jpeg" |
fileExtension == "gif")
{ thisImg.src="fi le:\/\/"+thisObj.value ; }

else
{ alert ("Only jpg, jpeg and gif file
are allowed."); }

}
</script>



<form name="form2" method="post" enctype="multip art/form-data">

<img src="images/default.gif" name="myimga" width=100 height=8
border=0>

<INPUT NAME="upfile" TYPE="file" SIZE="80
ONchange="previ ew(myimga,upfil e);">

<INPUT NAME="upload" TYPE="submit" VALUE="Upload">

</form


-
miart

[Michael Winter]

Re: Preview image before upload.

On Thu, 26 Feb 2004 13:48:08 -0600, miarte
<miarte.12938v@ mail.forum4desi gners.com> wrote:
[color=blue]
> I have a form to allow the user upload images.
> The user browse for an image in their computer and click open, the
> image to be upload is preview on the img tag.
> The script works fine with IE, but does not work with mozilla Netscape
> bowsers.
> Does anyone knows what could be the problem?
> Does the ONchange function works in Netscape?[/color]

Strange capitalisation, there.
[color=blue]
> Or anyone knows a tag that can preview the image file before uploading
> it.[/color]

The first problem is that you are referring to elements as though their
names are global identifiers. They are not - it is an IE thing (though
some other browsers might imitate it). Use the appropriate collections
(addressed later).

Another problem is that the onchange event won't fire properly in all
browsers. In IE and Opera, it works fine. In Netscape, you have to lose
focus on the control before it updates the image, and that seemed somewhat
tempermental. In Mozilla, nothing happens. The best approach, in my
estimation, would be to use a separate button that updated the preview,
rather than doing it automatically.
[color=blue]
> <script language="JavaS cript" type="text/JavaScript">[/color]

The language attribute is deprecated - remove it. The type attribute is
sufficient.

[snipped function]
[color=blue]
> </script>
>
> <form name="form2" method="post" enctype="multip art/form-data">[/color]

You should really use better names than "form2", and the like. It's good
programming practice to use descriptive names. The same goes for "myimga",
below.
[color=blue]
> <img src="images/default.gif" name="myimga" width=100 height=80
> border=0>[/color]

The name attribute on IMG elements should only be used for
backward-compatibility. If NN4 support isn't an issue, use the id
attribute.
[color=blue]
> <INPUT NAME="upfile" TYPE="file" SIZE="80"
> ONchange="previ ew(myimga,upfil e);">[/color]

Move this to an onclick event on a separate 'preview' button. You'll also
have to change the call to:

preview(documen t.images['imageName'],document.formN ame.upfile);

where imageName and formName are the new names of the elements, if you
decide to change them.

For future reference: in the original call, you should have used:

preview(documen t.images['myimga'],this);
[color=blue]
> <INPUT NAME="upload" TYPE="submit" VALUE="Upload">
>
> </form>[/color]

Hope that helps,
Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Ivo]

Re: Preview image before upload.

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
news:opr3zykciy 5vklcq@news-text.blueyonder .co.uk...[color=blue][color=green]
> >
> > <img src="images/default.gif" name="myimga" width=100 height=80
> > border=0>[/color]
>
> The name attribute on IMG elements should only be used for
> backward-compatibility. If NN4 support isn't an issue, use the id
> attribute.[/color]

Is that so? I find the document.images collection still very well supported
among the curent browsers. So much in fact, that document.images["foo"] is
always much faster than a document.getEle mentById("foo") would be in the
same situation, plus it is less code, it is easier to type, and it reminds
of the nature of "foo".
FWIW
Ivo

[Lasse Reichstein Nielsen]

Re: Preview image before upload.

"Ivo" <no@thank.you > writes:
[color=blue]
> "Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
> news:opr3zykciy 5vklcq@news-text.blueyonder .co.uk...[/color]
[color=blue][color=green]
>> The name attribute on IMG elements should only be used for
>> backward-compatibility. If NN4 support isn't an issue, use the id
>> attribute.[/color][/color]
[color=blue]
> Is that so? I find the document.images collection still very well supported
> among the curent browsers.[/color]

It should be. It is part of the W3C DOM.
[color=blue]
> So much in fact, that document.images["foo"] is always much faster
> than a document.getEle mentById("foo") would be in the same
> situation, plus it is less code, it is easier to type, and it
> reminds of the nature of "foo".[/color]

Yes, it is great. And it works with "id" too in modern browsers and
IE, so the advice to use "id" instead of "name" is not affected by
using document.images , only by using Netscape 4 or other ancient
browsers.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Ivo]

Re: Preview image before upload.

"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:oerlpfyl.f sf@hotpop.com.. .[color=blue][color=green]
> > So much in fact, that document.images["foo"] is always much faster
> > than a document.getEle mentById("foo") would be in the same
> > situation, plus it is less code, it is easier to type, and it
> > reminds of the nature of "foo".[/color]
>
> Yes, it is great. And it works with "id" too in modern browsers and
> IE, so the advice to use "id" instead of "name" is not affected by
> using document.images , only by using Netscape 4 or other ancient
> browsers.[/color]

Aha, click, OK.
Thanks, Ivo
[color=blue]
>
> /L
> --
> Lasse Reichstein Nielsen - lrn@hotpop.com
> DHTML Death Colors:[/color]
<URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=blue]
> 'Faith without judgement merely degrades the spirit divine.'[/color]