readAsDataURL – obsługa obrazków w JS

Obrazki można pobrać i przesłać dalej lub przetworzyć np. wyświetlić ikonkę

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

 

Pobranie obrazka z kontrolki input i wyświetlenie (przed przesłaniem dalej)

<input type="file" onchange="previewFile()" accept="image/*"><br>
<img src="" height="200" alt="Image preview...">   // src - pusty

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

  reader.addEventListener("load", function () {
    img.src = reader.result;     // zamiast ścieżki "data:,base64"
  }, false);

  if (file) reader.readAsDataURL(file);
}

Wczytywanie kilku obrazków

function previewFiles() {

  var preview = document.querySelector('#preview');            // div
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

   // Sprawdzenie typu mime
   if (!file.type.startsWith('image/')){ continue }

   // Lub inny sposób - sprawdzenie rozszerzenia pliku
   if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { 

     var reader = new FileReader(); 
     reader.addEventListener("load", function () { 
       var image    = new Image(); 

       image.height = 100; 
       image.title  = file.name; 
       image.classList.add("thumb");
       image.src = this.result; 

       preview.appendChild( image ); }, false); // event 

    reader.readAsDataURL(file); 
    } // if

} // callback readAndPreview 

if (files) [].forEach.call(files, readAndPreview); }