Question

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 fly” 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>

Answer 1

[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.