Question

When a user is uploading an image, is there a way I can load the image client side and show it to them first, before uploading it to the server? Preferably using javascript/jquery only, but using flash would be acceptable too.

Answer 1

It is possible with the new FileReader interface defined in HTML5 and works on Firefox currently.

A file input has an associated files property which tracks the list of files currently selected for that input. To display a file from this list, create a new FileReader object, initialize its onload event handler, and read the file as a data URL.

// get the first file, foo is a file input field
var file = document.getElementById('foo').files[0];

// setup the reader and the load complete callback
var reader = new FileReader();
reader.onload = function(e) {
    var image = new Image();
    // string representing the image
    image.src = e.target.result;
    document.body.appendChild(image);
};

// read the file as a data url
reader.readAsDataURL(file);

Once the file is loaded, you will have access to its contents in a data url scheme, for instance:

data:image/jpeg;base64,...aqHI7sNyPGFjdtQvFr/2Q==

Create a new Image and set its src attribute to this data string.

See a working example here. Firefox only.