Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting the SRC of an image.

Status
Not open for further replies.
iaresean

iaresean

Programmer
Joined
Mar 24, 2003
Messages
570
Location
ZA
Hey all I have the following code, which works fine in IE, but has no effect in FireFox.

Basically I want to set the src of the image object to that of the selected image so that the client can preview the image before uploading.

Here is the code snippet:
Code: 
<input class="FormField" onchange="document.getElementById('imgPreview').src=this.value" type="file" id="inpFile" style="position: relative; width:300px;" />
<img id="imgPreview" src="../../../_Images/shim.gif" height="80" alt="Image Preview" />

Does anyone know what I am doing wrong?

Any and all help is GREATLY appreciated.

Sean. [peace]
 
Sort by date Sort by votes
A bit of guesswork here... but try it annyway:

Code: 
onchange="imageName = 'file:///' + escape(this.value.split('\\').join('/')); imageName = imageName.split('%3A').join(':'); document.getElementById('imgPreview').src = imageName;"

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Billyray,

Nice try, but no cigar. :-(

I still don't see any javascript errors in the firefox console. I am beginning to wonder if the onchange event ever gets fired.... hmmm - let me try an alert.

In the mean time, I am open to any all suggestions.

Thanks again for the effort;

Sean. [peace]
 
Upvote 0 Downvote
Wierd, the alert works fine and does post the correct filename.

Sean. [peace]
 
Upvote 0 Downvote
[tt]
<input class="FormField" onchange="document.getElementById('imgPreview').src=[blue]'file:///'+this.value.replace(/\\/g,'/')[/blue]" type="file" id="inpFile" style="position: relative; width:300px;" />
<img id="imgPreview" src="../../../_Images/shim.gif" height="80" alt="Image Preview" />
[/tt]
 
Upvote 0 Downvote
Hi tsuji,

Thanks for the post, but that didn't work either. :-/

Do I perhaps have to invoke some sort of refresh() command for firefox to fetch the image into the object perhaps?

Thanks for any and all help!

Sean. [peace]
 
Upvote 0 Downvote
Syntactically, it is as shown. (You can test it on your local system, ie, not through the web server.) It is the security setting which blocks the display, in case the page is served via a web server. (If you right-click on the image and choose show, it will show up correctly.)
 
Upvote 0 Downvote
So is this a FireFox security setting that states that images cannot be dynamically reassigned when the page was server from a web server?

When you say local, do you mean not via my local web server, but on a basic html file stored on my local pc that I just open?

This is turning out to be far more complicated than I would have thought.

Sean. [peace]
 
Upvote 0 Downvote
>When you say local, do you mean not via my local web server, but on a basic html file stored on my local pc that I just open?
I just meant simply local file system, not through web server to deliver the file. Open htm by double-click sort of thing.
 
Upvote 0 Downvote
Ok, so I did understand you correctly.

Sean. [peace]
 
Upvote 0 Downvote
So is there absolutely no way that I can do this? :-(

Sean. [peace]
 
Upvote 0 Downvote
Yes there is. The code I showed above should have worked... But anyway - this works 100% fine locally (from my HDD) in both IE and Firefox:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Image switching test</title>
	<script type="text/javascript">
	<!--

		function setImage(newSrc) {
			newSrc = 'file:///' + escape(newSrc.split('\\').join('/'));
			newSrc = newSrc.split('%3A').join(':');
			document.getElementById('imgPreview').src = newSrc;
		}
	//-->
	</script>
</head>

<body>
	<form>
		<input onchange="setImage(this.value);" type="file">
	</form>
	<img id="imgPreview" src="" height="80" alt="Image Preview">
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Aaah - sorry, I mis-understood the problem. I thought you couldn't get it working locally... but you can't get it working off of a web server.

This, as tsuji says, is a security restriction put in place a short while ago (it wasn't in the pre-v1 release of Fx, IIRC...)

You can get around this by having a form where users upload images to your server, and then you display them.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
BillyRayPreachersSon,

Thanks for the effort. It is bad news about that security restriction. Very strange indeed, but I do trust FireFox and believe that they are the more powerful browser. So I am sure that FF's reason was a good one. :-(

Ok, well thanks for the information guys, at least you helped to stop me from running around in circles.

Cheers;

Sean. [peace]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
911
coldbohemia
coldbohemia
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
864
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top