previewing image before uploading

[programming.name]

Hi,

 

Please consider the following snippet:

 

<form enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <input name="uploadedfile" type="file" size="57" />
</form>

 

<?php
$target_path = "uploads/";
if(isset($_FILES['uploadedfile']['name']))
{
   $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
}

move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)

// additional code goes here...

?>

 

I want to display a preview image just below the form as soon as I choose the image(in other words, clikcing 'browse...' button, select an image and click 'OK').

 

I think it should be done using ajax but I have no idea how to do. If there is any tutorial or piece of code for this, please HELP.

 

Thanks.

[ignace]

<script type="text/javascript">
function previewImage(source, destination) {
  destination.src = source.value;
}
</script>
<img id="preview" src="no-image.jpg" width="100" height="100">
<input type="file" onchange="previewImage(this, document.getElementById('preview'))">

 

Tested it in FF3 and IE8

 

Edit: It doesn't work I now realize why it worked for me.