How to do INSTANT image preview on Mozilla?

lcf · #1 (**permalink**) 21-04-2004, 05:24 PM

well... I am creating a image upload form and there is a image preview area. User can preview the image after selecting image file from a File browse.

I got it works on Internet Explorer but it not on Mozilla(not tested on Netscape, anyway).

Here is my code, plain html and javascript only:

PHP Code:


			
<html>

<head>

<title>Upload Photo</title>

<script>

function changePhoto() {

    document['tempPic'].src = document.form1.picPath.value;

}

</script>

</head>

<body>

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

<img name="tempPic"> 

  <input type="file" name="picPath" onChange="changePhoto();">

  <input type="submit" name="upload" value="Upload">

</form>

</body>

</html>

I found that Mozilla's onChange event act differently than IE's, and it seems like does not work on type="file" input...

Anybody has any idea to make it works on Mozilla/Netscape?
Thank you in advance.

hymns · #2 (**permalink**) 21-04-2004, 10:10 PM

$me x guna mozilla
x amik tau pun pasal mozilla ke godzilla ke

lcf · #3 (**permalink**) 21-04-2004, 11:10 PM

it is open source browser. The best browser for OpenSource OS like Linux.

Official website: http://www.mozilla.org

hftey · #4 (**permalink**) 22-04-2004, 09:38 AM

I dont think it will work for mozilla. I have the same thing on the website I am working on and it only work for IE. I have not tested whether it is regarding onchange but I do know type="file" have some security restriction and things like set the type="file" with initial value can not be done either IE or Mozilla/Netscape.

lcf · #5 (**permalink**) 22-04-2004, 12:44 PM

I know the code does not work on Mozilla, just wonder is there any alternative way to do the same thing in Mozilla or not... :/

Btw, according to W3.org:

Quote:

...User agents may use the value of the value attribute as the initial file name.
Link: http://www.w3.org/TR/html401/interac....html#h-17.4.1

Dunno how come it does not work, IE and Mozilla no follow W3?

lcf · #6 (**permalink**) 22-04-2004, 12:51 PM

Addition info about type=file

- security risk for initial value on type=file: http://www.insecure.org/sploits/nets...type.file.html

Mozilla ignore the value: http://www.geocrawler.com/archives/3...2/4/0/8331991/

Guess IE also ignore the value as well.

BasicCX · #7 (**permalink**) 25-04-2004, 06:30 PM

I will study the code for a while. i think there are solution for this.

lcf · #8 (**permalink**) 25-04-2004, 10:41 PM

ok. wait for your good news

BasicCX · #9 (**permalink**) 26-04-2004, 01:14 AM

hey lcf. try change to

document.images.tempPic.src = "file:///"+document.form1.picPath.value;

I don't have Mozilla to test.

lcf · #10 (**permalink**) 26-04-2004, 01:54 AM

well, I can tell you it does not work. I have tried.

sufyan · #11 (**permalink**) 26-04-2004, 09:23 AM

You need to stripslashes for it to work in mozilla

For example (hardcoded):

The following won't work:

Code:

<script>

function changePhoto() {
document['tempPic'].src = "file:///C:\dir1\dir2\somepic.jpg";

}
</script>

However, the following will work in Mozilla:

Code:

<script>

function changePhoto() {
document['tempPic'].src = "file:///C:\\dir1\\dir2\\somepic.jpg";

}
</script>

So basically, you just have to figure out how to strip slashes. Hope this helps.

Quote:

it is open source browser. The best browser for OpenSource OS like Linux.
Official website: http://www.mozilla.org

Mozilla rocks!

Basically, in my opinion, if something works in Mozilla, it will work in IE. The Mozilla browser follows the recommendation of the W3C very tightly. IE is very loose on standards.

lcf · #12 (**permalink**) 26-04-2004, 12:18 PM

Thank you sufyan. I will try it now.

Quote:

Originally posted by sufyan
Basically, in my opinion, if something works in Mozilla, it will work in IE. The Mozilla browser follows the recommendation of the W3C very tightly. IE is very loose on standards.

Ya, right. But something works in IE, it may not works in Mozilla, because IE does not follow the standards...

lcf · #13 (**permalink**) 26-04-2004, 02:06 PM

Code:

<script>

function changePhoto() {
document['tempPic'].src = "file:///C:\\dir1\\dir2\\somepic.jpg";

}
</script>

Sorry to say that, this does not work on Mozilla. Well, at least not work on "Browse..." button. I suspect it does not strike the "onChange" event on "Browse..." button in Mozilla.

sufyan · #14 (**permalink**) 26-04-2004, 05:06 PM

Interesting... how about try throwing in a preview button?

Code:

<html>
<head>
<title>Upload Photo</title>
<script>
function changePhoto() {
document['tempPic'].src = "file:///C:\\Documents and Settings\\Sufyan\\My Documents\\My Received Files\\gfhfgh.JPG";

}
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<img name="tempPic"> 
  <input type="file" name="picPath">
  <input type="button" name="preview" value="Preview Image" onClick="changePhoto();">
  <input type="submit" name="upload" value="Upload">

</form>
</body>

</html>

See how that goes. I'v tested it with Firebird 0.8 and it works fine (for me)...

lcf · #15 (**permalink**) 26-04-2004, 05:44 PM

no problem with preview button.

So, shall we conclude that Mozilla does not fire onChange event on "Browse..." button?

And here is the workaround code for both IE and Mozilla:

Code:

<html>
<head>
<title>Upload Photo</title>
<script>
function changePhoto() {
	document['tempPic'].src = "file:///" + document.form1.picPath.value;
}
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<img name="tempPic"> 
  <input type="file" name="picPath" onChange="changePhoto();">
  <input type="button" name="preview" value="Preview Image" onClick="changePhoto();">
  <input type="submit" name="upload" value="Upload">

</form>
</body>

</html>

Thank you, everyone