jQuery - file upload - thumbnails

I have this code:

http://jsfiddle.net/J6vzU/1/

I want to dynamically display thumbnail of uploaded file (that will change after reupload) and eventually save the changes using "Save" button.

I know how to use timthumb etc., so resizing won't be a problem, but how to show uploaded image "on the fl开发者_开发知识库y" using jQuery?

Thanks a lot!

[edit]

Here's the code:

<form method="post" action="">
    <input type="file" name="datafile" size="40">
    <div>
        <p>Live AJAX uploaded file thumbnail</p>
    </div>
    <input type="submit" value="Save this image">
</form>

It is possible with browsers that support File and FileReader (caniuse.com)

Heres some examples and guides

Try this.

Step1: Add following line of code in your file

<form id="myform">
    <input type='file' onchange="showImage(this);" /> 
    <img id="imagepreview" src="" alt="your image" /> 
</form>

Step2: Add following script in same page

<script type="text/javascript">
function showImage(input) { 
         if (input.files && input.files[0]) { 
         var reader = new FileReader(); 
         reader.onload = function (e) { 
                 $('#imagepreview').attr('src', e.target.result); 
         }
         reader.readAsDataURL(input.files[0]); 
      } 
  } 
</script>

Check demo

[Edit 2.5 years later: see the comment by Joshua below this answer, this seems to be possible (now), if you are prepared to sacrifice support of old(er) browsers.]

To my knowledge, your browser can only upload the file to the server. So your scripts don't have access to the file itself before it is uploaded.

That said, you could come up with a solution in which your image is uploaded ajax-ish, the server processes it, and provides information (ie url) to the (thumbed) image back to the jQuery script.

But in that case, the 'magic' happens on the server and not in jQuery and the solution depends on the server-side languages/techniques you use.