By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,869 Members | 1,756 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,869 IT Pros & Developers. It's quick & easy.

Preview image before upload.

P: n/a

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="JavaScript" type="text/JavaScript">
function preview(thisImg,thisObj)
{

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

var fileExtension
filename.substring(filename.lastIndexOf(".")+1);
if (fileExtension == "jpg" || fileExtension == "jpeg" |
fileExtension == "gif")
{ thisImg.src="file:\/\/"+thisObj.value; }

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

}
</script>

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

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

<INPUT NAME="upfile" TYPE="file" SIZE="80
ONchange="preview(myimga,upfile);">

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

</form
-
miart

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Thu, 26 Feb 2004 13:48:08 -0600, miarte
<mi***********@mail.forum4designers.com> wrote:
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?
Strange capitalisation, there.
Or anyone knows a tag that can preview the image file before uploading
it.
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.
<script language="JavaScript" type="text/JavaScript">
The language attribute is deprecated - remove it. The type attribute is
sufficient.

[snipped function]
</script>

<form name="form2" method="post" enctype="multipart/form-data">
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.
<img src="images/default.gif" name="myimga" width=100 height=80
border=0>
The name attribute on IMG elements should only be used for
backward-compatibility. If NN4 support isn't an issue, use the id
attribute.
<INPUT NAME="upfile" TYPE="file" SIZE="80"
ONchange="preview(myimga,upfile);">
Move this to an onclick event on a separate 'preview' button. You'll also
have to change the call to:

preview(document.images['imageName'],document.formName.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(document.images['myimga'],this);
<INPUT NAME="upload" TYPE="submit" VALUE="Upload">

</form>


Hope that helps,
Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2

P: n/a
Ivo
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...

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


The name attribute on IMG elements should only be used for
backward-compatibility. If NN4 support isn't an issue, use the id
attribute.


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.getElementById("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
Jul 20 '05 #3

P: n/a
"Ivo" <no@thank.you> writes:
"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...
The name attribute on IMG elements should only be used for
backward-compatibility. If NN4 support isn't an issue, use the id
attribute.

Is that so? I find the document.images collection still very well supported
among the curent browsers.
It should be. It is part of the W3C DOM.
So much in fact, that document.images["foo"] is always much faster
than a document.getElementById("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".


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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

P: n/a
Ivo
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
So much in fact, that document.images["foo"] is always much faster
than a document.getElementById("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".
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.


Aha, click, OK.
Thanks, Ivo

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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.