Можно-ли отобразить изображение без загрузки его на сервер?

Question

[Ilya Bobkov]

Всем привет! Хотел узнать, Можно-ли отобразить изображение в форме без загрузки его на сервер? Или обязательно загружать нужно?

Answer 1

[Ильдар]

Есть в HTML 5 объект FileReader, который поможет это реализовать.
Пример, jsfiddle.net/sLnLeLwg
Документацию можно нагуглить.

Comments

[Олег Прилепа]

А вы случайно не знаете, насколько кроссбраузерно такое решение?

[Ильдар]

Олег Прилепа: например тут есть таблица совместимости caniuse.com/#feat=filereader

[Олег Прилепа]

Ильдар: круто, спасибо)

Answer 2

[Дмитрий]

Input[type=file], и к нему событие onchange, где в теле функции берем value этого input и ставим его в качестве атрибута src нужному тегу img.

Comments

[Евгений]

вранье, нет у него value и не может быть!
jsfiddle.net/sLnLeLwg/1

[Дмитрий]

Nc_Soft: jquery val() возьмет

[Евгений]

Дмитрий: не возьмет... jsfiddle.net/sLnLeLwg/2

[Дмитрий]

Nc_Soft: если сделать alert значения, то оно там есть

[hjk]

Дмитрий: там в val() только путь, этого явно недостаточно для отображения картинки

[Евгений]

Дмитрий: и что, там только локальный путь, а это не ответ на вопрос, который тс задал.

[Дмитрий]

Nc_Soft: hjk: да, погорячился я. каюсь. Олег Прилепа: можно удалить отметку "решение" с моего ответа.

[Олег Прилепа]

Дмитрий: мопед не мой)

[Дмитрий]

Олег Прилепа: сорри )) что-то я сегодня много ошибаюсь. Илья Бобков

Answer 3

[Илья Барков]

Да, можно, через объект FileReader. У меня есть вот такая функция на JavaScript, она вам пригодится.

<input type="file" id="file1" accept="image/jpeg" onchange="previewUploadedPhoto('file1', 'previewArea');" />
<div id="previewArea"></div>

// Preview uploaded photo
function previewUploadedPhoto(controlID, previewID) {
    if (document.getElementById(controlID).files) {
        var file = document.getElementById(controlID).files[0];
        if (file.type.match("image.*")) {
            if (parseInt(file.size) <= 4 * 1024 * 1024) {
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        var img = new Image();
                        img.src = e.target.result;

                        img.onload = function () {
                            if (img.width + img.height < 1000) {
                                $("#" + previewID).html("<b>Выбранный файл слишком маленького размера!</b>");
                                file.value = null;
                            }
                            else {
                                $("#" + previewID).html('<img class="thumb" src="' + e.target.result + '" title="' + theFile.name + '" width="160" />');
                            }
                        };
                    };
                })(file);
                reader.readAsDataURL(file);
            }
            else {
                $("#" + previewID).html("<b>Выбранный файл должен быть размером не более 4 МБ!</b>");
                file.value = null;
            }
        }
        else {
            $("#" + previewID).html("<b>Выбранный вами файл не является изображением и не будет загружен! Выберите другой файл.</b>");
            file.value = null;
        }
    }
}