Для тех кто не любит долго читать, сразу приведу пример кода, html форма: 

<form id="form" action="" method="post" enctype="multipart/form-data">
    <div>
        <input type="file" id="img" multiple accept="image/*" name="img"/>
    </div>
    <div>
        <img id="img-preview" src="default-preview.jpg" />
        <br />
        <a href="#" id="reset-img-preview">удалить изображения</a>
    </div>
    <div>
        <img id="img-preview" src="default-preview.jpg" />
    </div>
    <div>
        <input type="reset" value="Отмена"/>
        <input type="submit" value="Загрузить"/>
    </div>
</form>

И сам javascript: 

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $('#img').change(function () {
        var input = $(this)[0];
        if (input.files && input.files[0]) {
            if (input.files[0].type.match('image.*')) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img-preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                console.log('ошибка, не изображение');
            }
        } else {
            console.log('хьюстон у нас проблема');
        }
    });


    $('#reset-img-preview').click(function() {
        $('#img').val('');
        $('#img-preview').attr('src', 'default-preview.jpg');
    });


    $('#form').bind('reset', function () {
        $('#img-preview').attr('src', 'default-preview.jpg');
    });
</script>

Как это работает

А теперь пояснение. Для элемента с идентификатором img мы сделали обработчик события change() (происходит по завершению изменения значения элемента формы). В этом событие мы проверяем наличие файловых данных и MIME-тип данных на соответствие image/* т.к. мы делаем предпросмотр изображения.

После чего читаем данные из файла и сохраняем их в JavaScript переменную с помощью FileReader(). По окончанию загрузки данных (onload), присваиваем атрибуту src элемента в котором выводим превью изображения адрес загружаемого изображения (reader.readAsDataURL()).

Для отмены выбранного изображения добавим обработчик события click для ссылки "удалить изображение", который вернет превью в значение по умолчанию и очистит значение поля img: 

$('#reset-img-preview').click(function() {
    $('#img').val('');
    $('#img-preview').attr('src', 'default-preview.jpg');
});

При необходимости использовать кнопку сброса формы 'reset' нам так же нужно сбросить превью изображения. Для этого мы добавили обработчик события reset в котором приводим превью изображения в вид по умолчанию: 

$('#form').bind('reset', function() {
    $('#img-preview').attr('src', 'default-preview.jpg');
});

Дополнительно

Например для того того что бы изображение было всегда одного размера, можно использовать css стили к блоку с превью: 

<style>
#img-preview{
    width: 300px;
    height: 100px;
}
</style>