469,647 Members | 1,789 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,647 developers. It's quick & easy.

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>
<!--
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.h tml">
<!--
visit our website: http://www.angdatingdaan.org --- really cool
email me: ro****@linuxmail.org
-->
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
9 1679
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
"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>
<!--
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.h tml">
<!--
visit our website: http://www.angdatingdaan.org --- really cool
email me: ro****@linuxmail.org
-->
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
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>
<!--
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.h tml">
<!--
visit our website: http://www.angdatingdaan.org --- really cool
email me: ro****@linuxmail.org
-->
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
"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
"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
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Coder | last post: by
8 posts views Thread by Matt Kruse | last post: by
7 posts views Thread by Adam | last post: by
6 posts views Thread by scotty | last post: by
4 posts views Thread by iamaporkaholic | last post: by
15 posts views Thread by qwarehouse | last post: by
3 posts views Thread by Nightcrawler | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.