Tampilkan pratinjau gambar sebelum mengunggah


116

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?



Jawaban:


264

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:


2
Sekarang Bagaimana cara membatalkan beberapa gambar untuk diunggah dan kemudian mengirimkan formulir? Ini akan sangat membantu saya.
Hardik Sondagar

Tetapi saya ingin tahu bagaimana cara menghapus file tertentu untuk mencegahnya diunggah. Ini didefinisikan dalam beberapa struktur.
Hardik Sondagar

4
Cukup nonaktifkan elemen input file, dan itu tidak akan diunggah! Jadi dalam contoh di atas:document.getElementById("uploadImage").disabled = true
Kamyar Nazeri

@KamyarNazeri Jika FileReader tidak tersedia, lalu bagaimana?
MichaelLuthor

1
@Nicholas Potongan kode di bawah "Show snippet section" sebenarnya memungkinkan Anda memuat banyak gambar dan melihat semuanya
Kamyar Nazeri

20

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


1
isnt mempertimbangkan praktek yang buruk jika Anda declear vardi for loop? setiap kali for loopiterasi variabel baru readerakan berkurang ..
Phoenix

Menambahkan accept="image/*"atribut ke <input> dapat membantu mencegah pemilihan jenis file non-gambar.
Agustus

Bagaimana cara menampilkan nama gambar bersama dengan pratinjau gambar?
Naveenbos

4


1

Untuk gambar latar belakang, pastikan untuk menggunakan url()

node.backgroundImage = 'url(' + e.target.result + ')';
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.