show image from file input

[Dragen]

hi,

I'm pretty useless at javascript, but I'll try and explain what I'm doing.

I've got an upload for where a user can upload an image using a simple

<input type="file" />

input.

I've then got a div with the id "img_holder".

 

I'm trying to get javascript to read the value of the file input after you've clicked browse and found your image, then output it into the div.

Here's what I've got (modified from javascriptkit.com):

<script type="text/javascript" language="javascript">
function showpicture(selectobj){
piccontainerobj=document.getElementById("img_holder")
resetfade(10)
piccontainerobj.innerHTML='<img src="'+selectobj.value+'">'
fadepictoview=setInterval("gradualfade(piccontainerobj)",50)
}

function resetfade(degree){
if (window.fadepictoview)
	clearInterval(fadepictoview)
if (typeof piccontainerobj.style.MozOpacity=="string")
	piccontainerobj.style.MozOpacity=degree/100
else if (piccontainerobj.filters)
	piccontainerobj.filters.alpha.opacity=degree
}

function gradualfade(){
if (typeof piccontainerobj.style.MozOpacity=="string" && piccontainerobj.style.MozOpacity<1)
	piccontainerobj.style.MozOpacity=Math.min(parseFloat(piccontainerobj.style.MozOpacity)+0.2, 0.99)
else if (piccontainerobj.filters && piccontainerobj.filters.alpha.opacity<100)
	piccontainerobj.filters.alpha.opacity+=20
else //if not IE or Moz
	clearInterval(fadepictoview)
}
</script>

Then the html:

<input type="file" name="file" onClick="showpicture(this)" />
<div id="img_holder"></div>

The javascript was originally intended for a select box, which I think is partly the problem.

Abosolutely nothing happens when I enter something into the box.

[Dragen]

actually I've just thought.. can javascript access a local file from a computer? or does the file need to be on a server?

[Dragen]

sorry for another post...

I've now got it working on ie, but not on firefox.

I've been looking it up and seems like the code wont work on netscape, so I'm guessing that's the problem with firefox.

If anyone can tell me otherwise, or help me change my code to be cross-browser compatible that'd be great!

thanks