Просмотр изображения, выбранного из файловой системы на стороне клиента перед загрузкой?

У меня есть тег ввода в форме для выбора изображений для загрузки.

<div id="lowresDemo">
    <img src="some-url" />
</div>
<input type="file" id="FileToUpload" name="FileToUpload" />

Я попытался изменить эскиз, отображаемый в форме рядом с вводом, чтобы подтвердить пользователю, что их выбор был предназначен для следующего кода jquery:

$('#FileToUpload').change(function () {
    $('#lowresDemo img').attr('src', $(this).val());
});

... это не работает ни в одном браузере, по соображениям безопасности браузера я полагаю (как я помню, в последний раз я делал что-то вроде этого года назад).

Вопрос:
Есть ли способ представить пользователю выбор изображения до того, как они отправят форму, а не только путь к файлу + имя значения в поле ввода, но миниатюру, показывающую выбранный файл?

Или предотвращает ли это безопасность браузера?

Ответ 1

Это возможно с помощью API файлов (IE не поддерживает File API)

<input type="file">
<script type="text/javascript">
    $(document).ready(function() {
    $("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
            img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});
    });
</script>

Рабочий пример: http://jsfiddle.net/ugPDx/

Ответ 2

Невозможно выполнить операцию перед загрузкой изображения.

Но подумайте об этом по-другому - пользователь "не заботится", если изображение уже загружено - вы можете показать миниатюру после ее загрузки и показать флажок подтверждения. Gmail делает это со своими вложениями электронной почты - как только вы выбрали прикрепленный файл, начинается загрузка. Но пользователь всегда имеет возможность отключить этот файл, и он не будет включен в сообщение электронной почты.