Yüklemeden önce bir resim önizlemesi göster

HTML formumda, örneğin tür dosyasıyla girdi dosyaladım:

 <input type="file" multiple>

Ardından bu giriş düğmesine tıklayarak birden çok dosya seçiyorum. Şimdi formu göndermeden önce seçilen resimlerin önizlemesini göstermek istiyorum. Bunu HTML 5'te nasıl yapabilirim?

HTML5 , kullanıcının dosyalarla yerel olarak etkileşim kurmasına izin veren uygulamalar oluşturmanıza olanak tanıyan Dosya API spesifikasyonuyla birlikte gelir ; Bu, dosyaları gerçekten yüklemek zorunda kalmadan dosyaları yükleyebileceğiniz ve tarayıcıda oluşturabileceğiniz anlamına gelir. Dosya API'sinin bir parçası, web uygulamalarının dosyaların içeriğini eşzamansız olarak okumasına izin veren Dosya Okuyucu arabirimidir.

FileReaderBir görüntüyü DataURL olarak okumak için sınıfı kullanan ve srcbir görüntü etiketinin özniteliğini bir veri URL'si olarak ayarlayarak bir küçük resim oluşturan hızlı bir örneği burada bulabilirsiniz :

Html kodu:

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

JavaScript kodu:

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]);
};

JavaScript'te Dosya API'larını kullanma hakkında iyi bir makale burada .

Aşağıdaki HTML örneğindeki kod parçacığı, kullanıcının seçimindeki resimleri filtreler ve seçilen dosyaları birden çok küçük resim önizlemesine dönüştürür:

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>

Burada jQuery ile FileReader API kullanarak yaptım.

Html İşaretlemesi:

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

jQuery:

Burada jQuery kodunda önce dosya uzantısını kontrol ediyorum. yani işlenecek geçerli resim dosyası , daha sonra tarayıcının FileReader API'sini destekleyip desteklemediğini kontrol edecek , ardından yalnızca işlenecekse, saygı duyulan mesajı gösterecektir

$("#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");
     }
 });

Ayrıntılı Makale: Görüntüyü yüklemeden önce Önizleme, jQuery, Canlı Demo ile HTML5 FileReader ()

Arka plan resimleri için kullandığınızdan emin olun. url()

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