Просмотр изображений перед загрузкой на сайт

Это можно сделать, используя следующую функцию:

function readURL(input, img_container) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) { img_container.attr(‘src’, e.target.result); };
        reader.readAsDataURL(input.files[0]);
    }
}

И использовать, например, так:

$(‘#myFileField’).change(function(e) {
    readURL(e.target, $(‘#myImgPreview’));
});

При верстке:

<div><input type="file" id="myFileField" /></div>
<div><img id="myImgPreview" /></div>

Источник: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded