Beranda
FrontEnd

Membuat Image Preview Dan Filter Gambar Pada File Chooser HTML

LATAR BELAKANG

Image Preview dalam artikel ini adalah sebuah tampilan gambar yang muncul setelah pengguna/user memilih gambar dari file chooser, fungsinya agar pengguna dapat memastikan (preview) bahwa gambar yang dipilih benar. HTML pada dasarnya tidak memiliki file chooser khusus gambar sehingga Image Preview perlu dibuat sendiri. 

PEMBAHASAN

JavaScript diperlukan untuk membuat ImagePreview ini, bukan JavaScript yang rumit melainkan JavaScript dasar yang mudah dipahami dan dikustomisasi. Namun JavaScript ini membutuhkan core dari JavaScript yang wajib ada yaitu JQuery yang tersedia melalui CDN maupun lokal. Penulis memberi contoh pada artikel ini dengan JQuery dari CDN.

Langkah 1

<img src="holder.jpg" id="foto" width="300px">

Buat tag img untuk tempat gambar yang dipilih pengguna ditampilkan, jangan lupa berikan gambar 'image placeholder' agar pengguna tau kalau nanti setelah memilih gambar akan ditampilkan preview pada tempat tersebut.

Pada tag img tersebut juga wajib ada atribut ID, atribut ini digunakan agar dapat dikenali JavaScript. Pada kode contoh diatas tag img mempunyai artibut ID yaitu 'foto'

Langkah 2

Impor JQuery dan buat function di tag body contoh kode seperti dibawah ini : 
<body>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type="text/javascript">
          function gambar(val){
              $("#foto").attr('src',URL.createObjectURL(event.target.files[0]));
          }
      </script>
 </body>

Impor JQuery harus selalu berada paling atas karena menjadi core yang diperlukan lebih dulu. Function yang dibuat haruslah memiliki aksi yang terpicu/triggered saat pengguna mengubah form input file dalam function/method standar berbagai pemrograman namanya adalah onChange().

Aksi tersebut dapat dibuat dengan JavaScript mengakses langsung tag inputdengan DOM artibut ID ataupun dengan menambahkan atribut onChange() pada tag input. Pada contoh kode di atas. Aksi tersebut akan dibuat dengan cara menambahkan atribut onChange() pada tag input.

Pada function tersebut ada kode JavaScript untuk mengganti 'src' atau gambar dari holder pada Langkah 1 dengan gambar pilihan pengguna. JavaScript pada fungsi ini mengakses langsung tag img dengan cara DOM attribut ID yaitu 'foto'.

Langkah 3

Buat tag input dengan tipe file contohnya seperti dibawah ini : 
<input type="file" accept="image/png, .jpeg, .jpg" onchange="gambar(this.value)">

Pada tag input ada tambahan attribut accept="image/png, .jpeg, .jpg", attribut tersebut berfungsi sebagai filter agar yang bisa pengguna pilih hanya gambar dengan ekstensi tersebut saja. Tag input ini tidak memerlukan attribut ID, karena memicu function pada Langkah 2 menggunakan attribut onChange() yang ditambahkan pada tag input .

Jika ingin memicu melalui JavaScript maka perlu menambahkan attribut ID.

KESIMPULAN

Hasilnya seperti di bawah ini :
Tampilan Holder

Tampilan FileChooser1

Tampilan FileChooser2

Tampilan Hasil

Sesingkat itu kode untuk membuat Image Preview pada Form HTML. Jika mengalami masalah dan ada pertanyaan silakan tanyakan pada penulis melalui sosial media penulis melalui widget pada header situs ini yang.

Contoh projek bisa melihat pada github html-imagepreview dibawah ini :

html-imagepreview

Saya seorang programmer dengan fokus developer Web dan Android.