Accessing a local image dynamically from an <img> tag

Hi,

I'm trying to setup a script that will dynamically show the user a thumbnail of an image before it is uploaded.  This is handy since the user can see a preview of the image (to make sure it's the one they expected) before they upload it.  I'm dealing with some non-savvy computer users, so this functionality is highly desired.  It works fine with Internet Explorer, but with Firefox and other Mozilla browsers it won't display the image.

COBOLdinosaur, this sounds like it may be up your ally :)

Here's a snippet of code that works in IE:

<script>
  function show(id) { document.getElementById(id).style.display = 'block'; }
  function hide(id) { document.getElementById(id).style.display = 'none'; }
</script>

<div id="div_upload_file">
    <font style="font-variant:small-caps; font-size:16px; font-weight:bold;">Image to Upload</font><br />
    <input id="upload_file" type="file" size="48" name="upload_file" value="" onchange="hide('div_upload_file'); var img = document.getElementById('upload_preview'); show(img.id); img.src = this.value; img.alt = this.value;" style="border:1px solid black;" />
</div>
<img id="upload_preview" src="#" style="width:200px; height:131px; display:none;" alt="" />

Is this some kind of security "feature" of Mozilla based browsers, or am I just setting the <img> src incorrectly?  Cd&?
-DougStart Free Trial