Membuat Preview Upload Image

Setelah beberapa artikel lalu kita membahas filter untuk menggunggah suatu file, kali ini kita akan membuat preview upload image hasil dari file gambar yang dipilih sebelum diunggah. Hal ini berguna agar user tidak salah dalam melakukan pemilihan file gambar yang diinginkan. Kali ini kita akan menggunakan Javascript untuk melakukannya.

Ok langsung saja kita coba cara membuatnya. Pertama tama kita akan membuat suatu element dengan type file yang berfungsi untuk memilih suatu file gambar. Di dalam element tersebut, kita gunakan event onchange() (kita akan membahas event onchange() ini pada artikel yang lain). Berikut codenya pembuatan element terebut :

 
<input type="file" id="upload" name="upload" onchange="upload(this);"/>
 

Pada code di atas, kita melihat event onchange() dengan nama upload. Setelah koda di atas telah ditulis, tlis juga pada bagian bawah suatu element img yang berfungsi untuk menampilkan gambar preview yang telah dipilih. Berikut baris codenya :

 
<img id="image" width="100%" height="165px"/>
 

Pada code di atas terdapat attriubut id dengan nama image sebagai tujuan lokasi tempat menampilkan image yang dipilih. Anda juga dapat menyesuaikan lebar dan tinggi preview yang diinginkan nantinya.

Setelah selesai, sekarang kita akan menulis code Javascript yang berfungsi untuk menampilkan gambar yang dipilih. Berikut penulisan codenya:

 
	function upload(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();

			reader.onload = function (e) {
				$('#image').attr('src', e.target.result);
			}

			reader.readAsDataURL(input.files[0]);
		}
	}	
 

Setelah code Javascript di atas ditulis, sekarang simpan file yang telah Anda buat. Kemudian silahkan akses pada browser. Apabila berhasil, maka Anda akan melihat hasilnya seperti ini :

See the Pen
Preview Image Upload by codenya.com (@codenyacom)
on CodePen.

 
Anda juga dapat menambahkan filter dengan tujuan agar user hanya bisa mengupload file gambar saja. Nah, mudah bukan? Demikianlah pembahasan singkat mengenai Membuat Preview pada Upload Image. Semoga bermanfaat untuk Kita semua.