Javascript Issue With Firefox

**Daniel Kirsch** · Jul 23 '05, 03:33 PM

Re: Javascript Issue With Firefox

Joe wrote:[color=blue]
> I'm trying to create an image preview function so that my users can
> preview images before they upload them. I've got my example working
> locally on both Firefox and IE, and from the webserver in IE. However,
> when I try to access the example via a webserver and Firefox, it
> doesn't work. Any help with this would be greatly appreciated.
>
> (Code listed below:)
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>
> <script language=Javasc ript>
> <!--
> function previewImage()
> {
> var previewImage = document.f.colo rtheme.value;
> var spaceMatch = / /gi;
> var slashMatch = /\\/gi;
> previewImage = previewImage.re place(spaceMatc h, "%20");
> previewImage = previewImage.re place(slashMatc h, "/");
> previewImage = "file:///" + previewImage;[/color]

You set a local file with the "file" protocol. This should only work
locally. As a web application should not access to local files. If this
will work in IE it might be a security risk.

Instead, set the full path to your file on the web server or better - as
it might work on both your local drive and your server - define a
relative path and don't use backslashes.

Daniel

**Joe** · Jul 23 '05, 03:34 PM

Re: Javascript Issue With Firefox

Thanks for the quick response Daniel. Let me see if I'm understanding
correctly... So basically what you're saying is there should be no way
for my end user to be able to see the picture they are uploading
before they actually go ahead and upload it?

Daniel Kirsch <Iwillnotread_d aniel@gmx.de> wrote in message news:<co6rhk$hc 8$03$1@news.t-online.com>...[color=blue]
> Joe wrote:[color=green]
> > I'm trying to create an image preview function so that my users can
> > preview images before they upload them. I've got my example working
> > locally on both Firefox and IE, and from the webserver in IE. However,
> > when I try to access the example via a webserver and Firefox, it
> > doesn't work. Any help with this would be greatly appreciated.
> >
> > (Code listed below:)
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> >
> > <script language=Javasc ript>
> > <!--
> > function previewImage()
> > {
> > var previewImage = document.f.colo rtheme.value;
> > var spaceMatch = / /gi;
> > var slashMatch = /\\/gi;
> > previewImage = previewImage.re place(spaceMatc h, "%20");
> > previewImage = previewImage.re place(slashMatc h, "/");
> > previewImage = "file:///" + previewImage;[/color]
>
> You set a local file with the "file" protocol. This should only work
> locally. As a web application should not access to local files. If this
> will work in IE it might be a security risk.
>
> Instead, set the full path to your file on the web server or better - as
> it might work on both your local drive and your server - define a
> relative path and don't use backslashes.
>
> Daniel[/color]

**McKirahan** · Jul 23 '05, 03:34 PM

Re: Javascript Issue With Firefox

"Joe" <kavin620@gmail .com> wrote in message
news:f4bfb00.04 11252327.13d9fa 5e@posting.goog le.com...[color=blue]
> I'm trying to create an image preview function so that my users can
> preview images before they upload them. I've got my example working
> locally on both Firefox and IE, and from the webserver in IE. However,
> when I try to access the example via a webserver and Firefox, it
> doesn't work. Any help with this would be greatly appreciated.
>
> (Code listed below:)
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>
> <script language=Javasc ript>
> 
> </script>
>
> <html>
> <head>
> <title>PREVIE W-IMAGE (UPDATED-1123)</title>
> </head>
>
> <body>
> <h5>PREVIEW IMAGE onChange</h5>
> <table border="1" bgcolor="gold">
> <tr>
> <td>
> <form method="post" name="f" id="f"
> action="form_dr opdown_image_se lect_rmk_UNIVER SAL.html">
> 
> Select image:<br>
> <input type="file" name="picture" maxlength="1024 " value=""
> onchange="previ ewImage()" id="colortheme" >
>
> </center>
> </form>
> </td>
> <td valign="center" width="300" align="center"> <img
>[/color]
src="http://images.animatio nfactory.com/animations/animals/rodents/mouse_qui
et_shh/mouse_quiet_shh _sm_nwm.gif"[color=blue]
> border="0" id="PREVIEW" alt="preview image"/></td>
> </tr>
> </table>
> </body>
> </html>[/color]

"<input type=file" does not support "onchange".

Also, you shouldn't assign the same name to a function and a variable.

You could invoke it via a button; try this:

<html>
<head>
<title>preview. htm</title>
<script type="text/javascript">
function previewImage() {
var previewValue = document.f.colo rtheme.value;
// var spaceMatch = / /gi;
// var slashMatch = /\\/gi;
previewValue = previewValue.re place(/ /gi,"%20");
previewValue = previewValue.re place(/\\/gi,"/");
previewValue = "file:///" + previewValue;
alert(previewVa lue);
document.getEle mentById('PREVI EW').src = previewValue;
return false;
}
</script>
</head>
<body>
<h5>PREVIEW IMAGE onClick</h5>
<table border="1" bgcolor="gold">
<tr>
<td>
<form action="form_dr opdown_image_se lect_rmk_UNIVER SAL.html"
method="post" name="f">
Select image:<br>
<input type="file" name="picture" id="colortheme" >
<input type="button" vlaue="Preview" onclick="previe wImage()">
</form>
</td>
<td valign="center" width="300" align="center">
<img
src="http://images.animatio nfactory.com/animations/animals/rodents/mouse_qui
et_shh/mouse_quiet_shh _sm_nwm.gif" border="1" id="PREVIEW" alt="preview
image"/>
</td>
</tr>
</table>
</body>
</html>

**Michael Winter** · Jul 23 '05, 03:34 PM

Re: Javascript Issue With Firefox

On Fri, 26 Nov 2004 16:30:54 GMT, McKirahan <News@McKirahan .com> wrote:

[snip]
[color=blue][color=green]
>> function previewImage()
>> {
>> var previewImage = document.f.colo rtheme.value;[/color][/color]

[snip]
[color=blue]
> Also, you shouldn't assign the same name to a function and a variable.[/color]

Problems will only occur if the scopes clash. As it is, the variable is in
a different scope. The only adverse effect is that code would be unable to
access the "outer" identifier, but that isn't a concern here.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Joe** · Jul 23 '05, 03:34 PM

Re: Javascript Issue With Firefox

Thanks for the tips. However, I went ahead and tried your code. It
seems to suffer from the exact same problems as my code. Namely, it
works fine when accessed from the desktop. However, if you stick it on
a webserver it just doesn't work. Does it work for you?

"McKirahan" <News@McKirahan .com> wrote in message news:<2TIpd.396 163$wV.210142@a ttbi_s54>...[color=blue]
> "Joe" <kavin620@gmail .com> wrote in message
> news:f4bfb00.04 11252327.13d9fa 5e@posting.goog le.com...[color=green]
> > I'm trying to create an image preview function so that my users can
> > preview images before they upload them. I've got my example working
> > locally on both Firefox and IE, and from the webserver in IE. However,
> > when I try to access the example via a webserver and Firefox, it
> > doesn't work. Any help with this would be greatly appreciated.
> >
> > (Code listed below:)
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> >
> > <script language=Javasc ript>
> > 
> > </script>
> >
> > <html>
> > <head>
> > <title>PREVIE W-IMAGE (UPDATED-1123)</title>
> > </head>
> >
> > <body>
> > <h5>PREVIEW IMAGE onChange</h5>
> > <table border="1" bgcolor="gold">
> > <tr>
> > <td>
> > <form method="post" name="f" id="f"
> > action="form_dr opdown_image_se lect_rmk_UNIVER SAL.html">
> > 
> > Select image:<br>
> > <input type="file" name="picture" maxlength="1024 " value=""
> > onchange="previ ewImage()" id="colortheme" >
> >
> > </center>
> > </form>
> > </td>
> > <td valign="center" width="300" align="center"> <img
> >[/color]
> src="http://images.animatio nfactory.com/animations/animals/rodents/mouse_qui
> et_shh/mouse_quiet_shh _sm_nwm.gif"[color=green]
> > border="0" id="PREVIEW" alt="preview image"/></td>
> > </tr>
> > </table>
> > </body>
> > </html>[/color]
>
> "<input type=file" does not support "onchange".
>
> Also, you shouldn't assign the same name to a function and a variable.
>
> You could invoke it via a button; try this:
>
> <html>
> <head>
> <title>preview. htm</title>
> <script type="text/javascript">
> function previewImage() {
> var previewValue = document.f.colo rtheme.value;
> // var spaceMatch = / /gi;
> // var slashMatch = /\\/gi;
> previewValue = previewValue.re place(/ /gi,"%20");
> previewValue = previewValue.re place(/\\/gi,"/");
> previewValue = "file:///" + previewValue;
> alert(previewVa lue);
> document.getEle mentById('PREVI EW').src = previewValue;
> return false;
> }
> </script>
> </head>
> <body>
> <h5>PREVIEW IMAGE onClick</h5>
> <table border="1" bgcolor="gold">
> <tr>
> <td>
> <form action="form_dr opdown_image_se lect_rmk_UNIVER SAL.html"
> method="post" name="f">
> Select image:<br>
> <input type="file" name="picture" id="colortheme" >
> <input type="button" vlaue="Preview" onclick="previe wImage()">
> </form>
> </td>
> <td valign="center" width="300" align="center">
> <img
> src="http://images.animatio nfactory.com/animations/animals/rodents/mouse_qui
> et_shh/mouse_quiet_shh _sm_nwm.gif" border="1" id="PREVIEW" alt="preview
> image"/>
> </td>
> </tr>
> </table>
> </body>
> </html>[/color]

**McKirahan** · Jul 23 '05, 03:35 PM

Re: Javascript Issue With Firefox

"Joe" <kavin620@gmail .com> wrote in message
news:f4bfb00.04 11262247.5d57ec 75@posting.goog le.com...[color=blue]
> Thanks for the tips. However, I went ahead and tried your code. It
> seems to suffer from the exact same problems as my code. Namely, it
> works fine when accessed from the desktop. However, if you stick it on
> a webserver it just doesn't work. Does it work for you?[/color]

[snip]

It worked for me (IE 5.5) via:

http://localhost/preview.htm

**Joe** · Jul 23 '05, 03:35 PM

Re: Javascript Issue With Firefox

Oh yeah, sorry. It works fine for me in IE, but so does my original
code. I'm only having problems with FireFox.

"McKirahan" <News@McKirahan .com> wrote in message news:<fc0qd.572 797$mD.120678@a ttbi_s02>...[color=blue]
> "Joe" <kavin620@gmail .com> wrote in message
> news:f4bfb00.04 11262247.5d57ec 75@posting.goog le.com...[color=green]
> > Thanks for the tips. However, I went ahead and tried your code. It
> > seems to suffer from the exact same problems as my code. Namely, it
> > works fine when accessed from the desktop. However, if you stick it on
> > a webserver it just doesn't work. Does it work for you?[/color]
>
> [snip]
>
> It worked for me (IE 5.5) via:
> http://localhost/preview.htm[/color]

**McKirahan** · Jul 23 '05, 03:35 PM

Re: Javascript Issue With Firefox

"Joe" <kavin620@gmail .com> wrote in message
news:f4bfb00.04 11271340.7d4cbd 37@posting.goog le.com...[color=blue]
> Oh yeah, sorry. It works fine for me in IE, but so does my original
> code. I'm only having problems with FireFox.
>
> "McKirahan" <News@McKirahan .com> wrote in message[/color]
news:<fc0qd.572 797$mD.120678@a ttbi_s02>...[color=blue][color=green]
> > "Joe" <kavin620@gmail .com> wrote in message
> > news:f4bfb00.04 11262247.5d57ec 75@posting.goog le.com...[color=darkred]
> > > Thanks for the tips. However, I went ahead and tried your code. It
> > > seems to suffer from the exact same problems as my code. Namely, it
> > > works fine when accessed from the desktop. However, if you stick it on
> > > a webserver it just doesn't work. Does it work for you?[/color]
> >
> > [snip]
> >
> > It worked for me (IE 5.5) via:
> > http://localhost/preview.htm[/color][/color]

Sorry, I forgot the original Subject line!

**Daniel Kirsch** · Jul 23 '05, 03:36 PM

Re: Javascript Issue With Firefox

Joe wrote:[color=blue]
> Thanks for the quick response Daniel. Let me see if I'm understanding
> correctly... So basically what you're saying is there should be no way
> for my end user to be able to see the picture they are uploading
> before they actually go ahead and upload it?[/color]

Probably not. You may access local files with additional privileges, but
the confirmation popups usually frighten people.

Daniel

Javascript Issue With Firefox

Javascript Issue With Firefox

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment