Как отобразить изображение, которое я ввел

я сделал кнопку, которая принимает изображение в качестве входных данных, но я не могу найти способ показать изображение. Я попытался создать пустой элемент, а затем изменить его URL-адрес, как я видел на другом веб-сайте, но это не сработало.

  • HTML

     <input 
     id="myImage"
     class="photo-upload"
     type="file"
     accept="image/*, image/jpeg">

     <img id="the-picture" width="200" />

  • JavaScript

     const uploadPictureButton = document.querySelector(".photo-upload");

 uploadPictureButton.addEventListener("click", displayPicture);

 function displayPicture(event) {
     let image = document.getElementById("myImage");
     image.src = URL.createObjectURL(event.target.files[0]);
 };

javascript image input display
person Avichai Greenblum    schedule 14.09.2020    source источник
comment
На это уже был дан ответ. Ссылка здесь   -  person dela    schedule 14.09.2020
comment
Отвечает ли это на ваш вопрос? Предварительный просмотр изображения перед его загрузкой   -  person angel.bonev    schedule 14.09.2020

Ответы (3)


arrow_upward
0
arrow_downward

В коде потребовались некоторые исправления, файл должен быть прочитан и URL-адрес должен быть создан, вот рабочий фрагмент кода.

const uploadPictureButton = document.querySelector(".photo-upload");

  uploadPictureButton.addEventListener('change', function () {
    displayPicture(this);
  });

 function displayPicture(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      document.getElementById('the-picture').setAttribute('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
 }
 <input 
     id="myImage"
     class="photo-upload"
     type="file"
     accept="image/*, image/jpeg">

<img id="the-picture" width="200" />

person Pratik Singh    schedule 14.09.2020
comment
я пытался запустить его, и он отлично работает! но я действительно не понимаю, почему, не могли бы вы объяснить мне, почему вы сделали: if (uploadPictureButton), а не просто сразу перешли к функции? - person Avichai Greenblum; 14.09.2020
comment
Я удалил это, здесь это не требовалось, спасибо, что указали на это! - person Pratik Singh; 14.09.2020

arrow_upward
0
arrow_downward

Вы также можете использовать innerHTML для отображения изображения.

person Community    schedule 14.09.2020

arrow_upward
0
arrow_downward

Попробуйте этот, он работает для меня

<img height="100" width="100" alt="avatar" id="imgPreview> <input type="file" onchange="document.querySelector("#imgPreview").src = window.URL.createObjectURL(this.files[0])">

person Aggestor    schedule 14.09.2020