Salah satu API yang diusung di HTML5 ialah File API. API ini merupakan interface (antarmuka) yang disediakan kepada user untuk mengakses file dari lokal (local file system).
Pada tutorial ini, kita akan membuat preview gambar thumbnail dengan menggunakan API FileReader HTML5. Nantinya sebelum sebuah gambar akan diupload ke server, maka preview gambar tersebut akan ditampilkan terlebih dahulu. Hal ini sangat membantu user untuk melihat sekilas bagaimana gambar nantinya akan ditampilkan jika sudah di upload. Untuk melihat cara kerjanya, silahkan cek demo dibawah.
Langkah 1
Siapkan terlebih dahulu dokumen HTML untuk inputan gambar dan letak preview gambar. Misal :
<!DOCTYPE html> <html> <body> <input type='file' onchange="readURL(this);" /> <!-- Membuat inputan gambar --> <img id="preview_gambar" src="#" alt="Gambar Anda" /> <!-- Area preview gambar --> </body> </html>
Langkah 2
Kemudian tuliskan perintah berikut untuk menjalankan API pembacaan file menggunakan FileReader. Dan tambahkan pula plugin jQuery agar proses preview gambar dapat berjalan.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function readURL(input) { // Mulai membaca inputan gambar
if (input.files && input.files[0]) {
var reader = new FileReader(); // Membuat variabel reader untuk API FileReader
reader.onload = function (e) { // Mulai pembacaan file
$('#preview_gambar') // Tampilkan gambar yang dibaca ke area id #preview_gambar
.attr('src', e.target.result)
.width(150); // Menentukan lebar gambar preview (dalam pixel)
//.height(200); // Jika ingin menentukan lebar gambar silahkan aktifkan perintah pada baris ini
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
