Menampilkan Image di Browser Tanpa Upload

Ketika membuat sebuah website terkadang kita menemui kebutuhan ingin menampilkan image di browser tanpa meng-upload-nya terlebih dahulu. Biasanya ini terjadi di halaman admin ketika ingin membuat sesuatu, misal dalam website e-commerce admin ingin menambahkan produk baru yang menampilkan gambar produk tersebut.

Jika kita hanya membuat input html biasa dengan type file, maka setelah kita memilih file image dari file picker yang dimunculkan browser, yang tampil hanyalah nama file image yang kita pilih, tidak ada preview image-nya. Padahal user akan lebih merasa nyaman ketika dia benar-benar mengetahui file image yang dia pilih tidak salah melalui preview image di web tersebut.

Ada dua pendekatan yang bisa dilakukan untuk menampilkan file image yang dipilih oleh user ke halaman yang sedang ia buka. Pendekatan pertama dengan meng-upload file image tersebut ke server terlebih dahulu (bisa menggunakan ajax kemudian kita akan mendapatkan url image untuk ditampilkan), tapi cara ini akan membuat user menunggu file image selesai ter-upload terlebih dahulu, yang terkadang tidak sebentar. Pendekatan kedua dengan mengambil base64 dari file image tersebut dan meletakkannya di tag img pada html. Yang akan saya bahas dalam tulisan kali ini adalah pendekatan yang kedua 🙂

Pada pendekatan kedua ini, kita hanya membutuhkan sedikit pengetahuan tentang javascript dan HTML 🙂 Javascript akan kita gunakan untuk membaca file yang dipilih oleh user dan mengubahnya ke base64. Karena javascript dijalankan di sisi clien (browser) maka tentu saja filenya akan diolah secara instan tanpa harus meng-upload-nya ke server terlebih dahulu.

Untuk mencobanya, silakan tambahkan HTML berikut di source yang sudah Anda buat:

<div style="border: 1px solid black; float: left;">
	<img id="preview-image" width="200px" src="#" alt="your image will be placed here" />
</div>
<input type='file' name="input-image" />

Dan tambahkan juga script javascript berikut ini:

<script type="text/javascript">
	function previewImage(input) {
		
		if (input.files && input.files[0]) {
			var fileReader = new FileReader();
			var imageFile = input.files[0];
			
			if(imageFile.type == "image/png" || imageFile.type == "image/jpeg") {
				fileReader.readAsDataURL(imageFile);
				
				fileReader.onload = function (e) {
					$('#preview-image').attr('src', e.target.result);
				}
			}
			else {
				alert("your file is not image");
			}
		}
	}

	$("[name='input-image']").change(function(){
		previewImage(this);
	});
</script>

Image yang Anda pilih akan diubah ke dalam base64 melalui proses fungsi preview image di javascript, dan akan ditampilkan secar instant di tag img dengan “preview-image”.

Cukup sederhana kan, silakan mencoba 🙂

*untuk lebih lengkapnya bisa juga unduh contoh lengkapnya di sini

Advertisements