By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,271 Members | 1,289 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,271 IT Pros & Developers. It's quick & easy.

Javascript Issue With Firefox

P: n/a
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
Share this Question
Share on Google+
9 Replies

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
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

P: n/a
"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

P: n/a
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

P: n/a
"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

P: n/a
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.