Javascript Issue With Firefox

J

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>
<!--
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;
document.getElementById('PREVIEW').src = previewImage;
return false;
}
//-->
</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.html">
<!--
visit our website: http://www.angdatingdaan.org --- really cool
email me: (e-mail address removed)
-->
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/...ts/mouse_quiet_shh/mouse_quiet_shh_sm_nwm.gif"
border="0" id="PREVIEW" alt="preview image"/></td>
</tr>
</table>
</body>
</html>
 
D

Daniel Kirsch

Joe said:
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;
Click to expand...

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
 
J

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?
 
M

McKirahan

Joe said:
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;
document.getElementById('PREVIEW').src = previewImage;
return false;
}
//-->
</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.html">
<!--
visit our website: http://www.angdatingdaan.org --- really cool
email me: (e-mail address removed)
-->
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>
Click to expand...

"<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.html"
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>
 
M

Michael Winter

[snip]
function previewImage()
{
var previewImage = document.f.colortheme.value;
Click to expand...
[snip]

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

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
 
J

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?
 
M

McKirahan

Joe said:
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?
Click to expand...

[snip]

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

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 said:
Joe said:
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?
Click to expand...

[snip]

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

McKirahan

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

"McKirahan" <[email protected]> wrote in message
Joe said:
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?
Click to expand...

[snip]

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

Sorry, I forgot the original Subject line!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
How do I fix this issue in sqaurespace code block? 1
How to wrap <td> content . 16
Function call from button to automatic 7
I Need Help with making a function that draws in a canvas using location data. 1
Please Help? 0
Canvas drawing HTML Javascript on elementor 1

Members online

No members online now.
Total: 70 (members: 1, guests: 69)
Robots: 248

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,740
Latest member
JudsonFrie

Latest Threads

Top