Preview Image Before Uploading

I have no problem uploading images to a file or into a database but I am having a heck of a time trying to view the image on the client side before uploading.

I have tried everything I am use to doing and I have searched for other answers, and copied a lot of other examples for changing the scr of an image to the file selected by the user but nothing is working.

I am testing with Firefox and IE 7 and here is some code below.

Any answers to help solve this would be greatly appreciated.

<SCRIPT LANGUAGE = "JavaScript">
<!--
var timerID = null;
var delay = 500;

function swap(filename){
clearTimeout(timerID);

filename = filename.replace(/\\/g,'/');
document.images["image1"].src = "file:///" + filename;
//document.images["image1"].src = filename;
alert("Image Src - " + document.images["image1"].src);
}

function StartTimer(){
if (document.form1.file1.value > ""){
//alert("Start Swap");
swap(document.form1.file1.value);
}else{
timerID = self.setTimeout('StartTimer()', delay);
}
}
//-->
</SCRIPT>

<form name="form1">
<p><input type="file" name="file1" size="20" onchange="StartTimer()"></p>
<img border="0" name="image1" id="image1" src="images/no_display_pic.jpg" width="200" height="150">
</form>

I notice one error:-

Replace:- if (document.form1.file1.value > ""){

by
if (document.form1.file1.value !="") {
or
if (document.form1.file1.value.length > 0) {

There may be other problems as well.

if (document.form1.file1.value > "")
That is correct, though looks unusual. Try executing this in the address bar to see. This will return true because "test" > "".
javascript:alert(("test">""))

I think the problem here is, if I remember it right, Firefox doesn't trigger onchange in input file. Try changing it to onclick. And also the problem might be due to browsers not allowing to use different protocols. I think some browsers don't allow setting image src using file protocol if the page is using http protocol.

Thanks for replying,

All the code seems good, I am getting into the swap() function and I have tested a few things just to make sure I could alter the image width and height and things like that but just the src will not change.

I have tried both:
if (document.form1.file1.value.length > 0)
and
if (document.form1.file1.value > "")
both work fine.

I sure it has something to do with the "file:///" or the way that I apply the src to the image. I have done this a few years ago but i just cant recall how.

Is there any error message? Actually, there's really nothing wrong with your code. But try it in IE6 and I think it will work. I believe this has something to do with security restrictions of linking file:// URL in a page in IE7 and Firefox. This link (http://kb.mozillazine.org/Links_to_local_pages_do_not_work) will give you an idea.

No, no errors, just completes but the image on the page stays the same.

Different ways that i had it setup (there have been so many different ways now), but anyway, different ways i would right click the image to check the picture properties and even thou the picture didn't change the properties would say src was pointing to or equal to the image file that i sellected client side.

Any other ideas of how to go about this would be greatly appreciated.

Did you read the link I posted above? It says Firefox (and probably IE7 too) blocks links to local files for security purposes.