Tampilkan pratinjau gambar sebelum mengunggah

Dalam formulir HTML saya, saya memiliki input yang diajukan dengan jenis file misalnya:

 <input type="file" multiple>

Lalu saya memilih beberapa file dengan mengklik tombol input itu. Sekarang saya ingin menampilkan pratinjau gambar yang dipilih sebelum mengirimkan formulir. Bagaimana melakukannya di HTML 5?

HTML5 hadir dengan spesifikasi API File , yang memungkinkan Anda membuat aplikasi yang memungkinkan pengguna berinteraksi dengan file secara lokal; Itu berarti Anda dapat memuat file dan merendernya di browser tanpa benar-benar harus mengunggah file. Bagian dari File API adalah antarmuka FileReader yang memungkinkan aplikasi web membaca konten file secara asinkron.

Berikut adalah contoh cepat yang memanfaatkan FileReaderkelas untuk membaca gambar sebagai DataURL dan membuat thumbnail dengan menyetel srcatribut tag gambar ke URL data:

Kode html:

<input type="file" id="files" />
<img id="image" />

Kode JavaScript:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Berikut artikel bagus tentang menggunakan API File di JavaScript .

Cuplikan kode pada contoh HTML di bawah memfilter gambar dari pilihan pengguna dan merender file yang dipilih menjadi beberapa pratinjau thumbnail:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Di sini saya lakukan dengan jQuery menggunakan FileReader API.

Markup Html:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Di sini, di kode jQuery, pertama saya memeriksa ekstensi file. yaitu file gambar yang valid untuk diproses, kemudian akan memeriksa apakah browser mendukung API FileReader ya maka hanya diproses lagi menampilkan pesan yang dihormati

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Artikel Detil: Cara Melihat Gambar sebelum mengunggahnya, jQuery, HTML5 FileReader () dengan Demo Langsung

Untuk gambar latar belakang, pastikan untuk menggunakan url()

node.backgroundImage = 'url(' + e.target.result + ')';