@Dimchik2008
Делаю сайты

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

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

<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
	}
}


61b518c800ebb005833951.png
  • Вопрос задан
  • 885 просмотров
Решения вопроса 1
nowm
@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-тип файла, читать его содержимое и так далее.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы