Javascript Issue With Firefox

Joe

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=Javascript>

</script>

<html>
<head>
<title>PREVIEW-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_dropdown_image_select_rmk_UNIVERSAL.h tml">

Select image:<br>
<input type="file" name="picture" maxlength="1024" value=""
onchange="previewImage()" id="colortheme">

</center>
</form>
</td>
<td valign="center" width="300" align="center"><img
src="http://images.animationfactory.com/animations/animals/rodents/mouse_quiet_shh/mouse_quiet_shh_sm_nwm.gif"
border="0" id="PREVIEW" alt="preview image"/></td>
</tr>
</table>
</body>
</html>

Jul 23 '05 #1

Follow Post Reply

1732

Daniel Kirsch

Joe wrote:

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=Javascript>
<!--
function previewImage()
{
var previewImage = document.f.colortheme.value;
var spaceMatch = / /gi;
var slashMatch = /\\/gi;
previewImage = previewImage.replace(spaceMatch, "%20");
previewImage = previewImage.replace(slashMatch, "/");
previewImage = "file:///" + previewImage;

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

Jul 23 '05 #2

Joe

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 <Iw*****************@gmx.de> wrote in message news:<co*************@news.t-online.com>...

Joe wrote:
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=Javascript>
<!--
function previewImage()
{
var previewImage = document.f.colortheme.value;
var spaceMatch = / /gi;
var slashMatch = /\\/gi;
previewImage = previewImage.replace(spaceMatch, "%20");
previewImage = previewImage.replace(slashMatch, "/");
previewImage = "file:///" + previewImage;

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

Jul 23 '05 #3

McKirahan

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...

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=Javascript>

</script>

<html>
<head>
<title>PREVIEW-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_dropdown_image_select_rmk_UNIVERSAL.h tml">

Select image:<br>
<input type="file" name="picture" maxlength="1024" value=""
onchange="previewImage()" id="colortheme">

</center>
</form>
</td>
<td valign="center" width="300" align="center"><img
src="http://images.animationfactory.com/animations/animals/rodents/mouse_qui
et_shh/mouse_quiet_shh_sm_nwm.gif" border="0" id="PREVIEW" alt="preview image"/></td>
</tr>
</table>
</body>
</html>

"<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.colortheme.value;
// var spaceMatch = / /gi;
// var slashMatch = /\\/gi;
previewValue = previewValue.replace(/ /gi,"%20");
previewValue = previewValue.replace(/\\/gi,"/");
previewValue = "file:///" + previewValue;
alert(previewValue);
document.getElementById('PREVIEW').src = previewValue;
return false;
}
</script>
</head>
<body>
<h5>PREVIEW IMAGE onClick</h5>
<table border="1" bgcolor="gold">
<tr>
<td>
<form action="form_dropdown_image_select_rmk_UNIVERSAL.h tml"
method="post" name="f">
Select image:<br>
<input type="file" name="picture" id="colortheme">
<input type="button" vlaue="Preview" onclick="previewImage()">
</form>
</td>
<td valign="center" width="300" align="center">
<img
src="http://images.animationfactory.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>

Jul 23 '05 #4

Michael Winter

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

[snip]

function previewImage()
{
var previewImage = document.f.colortheme.value;

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

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.

Jul 23 '05 #5

Joe

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" <Ne**@McKirahan.com> wrote in message news:<2TIpd.396163$wV.210142@attbi_s54>...

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...
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=Javascript>

</script>

<html>
<head>
<title>PREVIEW-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_dropdown_image_select_rmk_UNIVERSAL.h tml">

Select image:<br>
<input type="file" name="picture" maxlength="1024" value=""
onchange="previewImage()" id="colortheme">

</center>
</form>
</td>
<td valign="center" width="300" align="center"><img

src="http://images.animationfactory.com/animations/animals/rodents/mouse_qui
et_shh/mouse_quiet_shh_sm_nwm.gif"
border="0" id="PREVIEW" alt="preview image"/></td>
</tr>
</table>
</body>
</html>

"<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.colortheme.value;
// var spaceMatch = / /gi;
// var slashMatch = /\\/gi;
previewValue = previewValue.replace(/ /gi,"%20");
previewValue = previewValue.replace(/\\/gi,"/");
previewValue = "file:///" + previewValue;
alert(previewValue);
document.getElementById('PREVIEW').src = previewValue;
return false;
}
</script>
</head>
<body>
<h5>PREVIEW IMAGE onClick</h5>
<table border="1" bgcolor="gold">
<tr>
<td>
<form action="form_dropdown_image_select_rmk_UNIVERSAL.h tml"
method="post" name="f">
Select image:<br>
<input type="file" name="picture" id="colortheme">
<input type="button" vlaue="Preview" onclick="previewImage()">
</form>
</td>
<td valign="center" width="300" align="center">
<img
src="http://images.animationfactory.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>

Jul 23 '05 #6

McKirahan

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...

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?

[snip]

It worked for me (IE 5.5) via:
http://localhost/preview.htm

Jul 23 '05 #7

Joe

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

"McKirahan" <Ne**@McKirahan.com> wrote in message news:<fc0qd.572797$mD.120678@attbi_s02>...

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...
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?

[snip]

It worked for me (IE 5.5) via:
http://localhost/preview.htm

Jul 23 '05 #8

McKirahan

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...

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

"McKirahan" <Ne**@McKirahan.com> wrote in message

news:<fc0qd.572797$mD.120678@attbi_s02>...

"Joe" <ka******@gmail.com> wrote in message
news:f4*************************@posting.google.co m...
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?

[snip]

It worked for me (IE 5.5) via:
http://localhost/preview.htm

Sorry, I forgot the original Subject line!

Jul 23 '05 #9

Daniel Kirsch

Joe wrote:

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?

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

Daniel

Jul 23 '05 #10

Javascript Issue With Firefox

This discussion thread is closed

Similar topics