Возможно ли показать загруженное изображение через js? [дубликат]

#javascript #jquery

        
             
                
                    
                        
                            This question already has an answer here:
                            
                        
                    
                
                        
                            Как сделать предварительный просмотр картинок в форме
и передача картинки на сервер без перезагрузки страницы
                                
                                    (1 ответ)
                                
                        
                                Closed 2 года назад.
            
                    
Возможно ли показать загруженное изображение в input[type=file] через js до сохранения
его на сайте?
Как бы предпросмотр изображения.
    

Ответы

Ответ 1

Как я понимаю, вам нужно вот это



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

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});


  
  



Ответ 2

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}


Гуглится за 5 секунд


Ответ 3

document.querySelector("input").addEventListener("change", function () {
  if (this.files[0]) {
    var fr = new FileReader();

    fr.addEventListener("load", function () {
      document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
    }, false);

    fr.readAsDataURL(this.files[0]);
  }
});
label {
  display: inline-block;
  width: 8em;
  height: 8em;
  background: silver;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

input {
  display: none;
}






PS: Из https://ru.stackoverflow.com/a/594663/178988