Question

We have recently added image uploading and cropping to our site using Fine Uploader; mixing a set of javascript libraries with a HTTP Handler.

It is working well however for larger images the client is forced to:

1. Wait a while until the image has been uploaded using the HTTP Handler
2. Download the image again so it can be used with JCrop
3. The image is downloaded at full size then resized to a smaller image on the client side by JCrop.

I noticed on Twitter selecting an image for your profile shows the image instantly; with apparently no server side interaction.

Does anyone know how twitter achieves this client side viewing of an image without uploading it to the server; or have any advice on smoothing out the aforementioned process?

Answer 1

Probably like this

http://jsfiddle.net/dmZTm/

var URL = window.URL || window.webkitURL;

$("input").change(function() {
    var file = this.files && this.files[0];

    if (file) {
        var src = URL.createObjectURL(file);
        $("<img>", {
            src: src
        }).appendTo("body");
    }


});​