Image preview before upload

HTML5 FileAPI to show image preview of multiple images before submitting form

HTML

<input type="file" multiple>
<div id="img-previews"></div>

CSS

.img-preview {
    width:100px;
}

JavaScript

/* Function to show image preview */

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    document.getElementById('img-previews').innerHTML = '';
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }
        $('.img-preview-wrapper').removeClass('hidden');
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var figure = document.createElement('figure');
                alert(e.target.result);
                figure.innerHTML = ['<img class="img-preview" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('img-previews').insertBefore(figure, null);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}


$("input[type=file]").bind('change', handleFileSelect);