Как вставить изображение из input в img?

Question

[Дима Клепко]

Этот код не работает:

<img src="images/1.jpg" id="img1"> (нужно вставить в путь до картинки, путь из input type)
	<input type="file" name="myImg" class="myImg">
	<button class="apply">Применить</button>

myImg.onchange = function(){
	apply.onclick = function(){
		img1.src = myImg.src
	}
}

Comments

[0x0000002F]

У тебя в myImg.src всего лишь название выбранного файла. Либо ничего

Answer 1

[nowm]

Чтобы вставить изображение из input type="file", нужно после загрузки изображения прочитать содержимое этого файла с помощью FileReader, сконвертировать в формат data url и только потом это применять к тегу img.

myImg.onchange = function(event) {
    var target = event.target;

    if (!FileReader) {
        alert('FileReader не поддерживается — облом');
        return;
    }

    if (!target.files.length) {
        alert('Ничего не загружено');
        return;
    }

    var fileReader = new FileReader();
    fileReader.onload = functino() {
        img1.src = fileReader.result;
    }

    fileReader.readAsDataURL(target.files[0]);
}

В вашем коде myImg — это input type="file". У таких инпутов нет src. Когда с их помощью подгружаются файлы, в свойстве files, находятся все загруженные в этот инпут файлы. Точнее не файлы, а специальные объекты-интерфейсы, привязанные к загруженным файлам. С помощью этих интерфейсов уже можно делать различные действия с соответствующими файлами: узнавать название файла, дату последнего изменения, MIME-тип файла, читать его содержимое и так далее.

Comments

[Дима Клепко]

Картинка не загружается, выскакивает надпись "Ничего не загружено"

[nowm]

Дима Клепко, сорри, я дальше помочь не смогу. Я писал код прямо тут и у меня не было возможности его протестировать. Я мог где-то опечататься, например. Опять же, после отправки этого ответа я пару раз его правил, и вы, возможно использовали старую версию. Например, одна из последних правок: замена опечатки Array.isArray(target files) на Array.isArray(target.files) — как раз то место, где может выскивать это сообщение.

[Сергей delphinpro]

nowm,

Array.isArray(target.files)

Там не массив, а объект FileList.
В проверке не нуждается, это свойство всегда присутствует у данного типа инпута.

[nowm]

Сергей delphinpro, поправил код, спасибо.

[nowm]

Дима Клепко, новый код в ответе должен корректно сработать.

[nowm]

Сергей delphinpro, удалил упоминание пути, потому что оно, ко всему прочему, ещё и не стандартное.

[Дима Клепко]

Спасибо novwm и Сергей delphinpro