Upload Image Dengan Preview Pada HTML

Assalamualakum wr. wb.....
Sahabat blogger semua, bagaimana kabarnya? tentu saja mudah-mudahan dalam keadaan baik-baik saja. Kali ini saya mau share cara upload gambar pada html tapi ada previewnya. Jadi sebelum image kita submit kita akan mengetahui image mana yang sudah kita upload.
Daftar isi :

Deskripsi umum (sudah kita jelaskan diatas)
Material yang dibutuhkan
Coding dan Programming
Testing dan View Hasil
Berkas Latihan

Sekarang kita akan mulai mengumpulkan material yang dibutuhkan untuk memulai latihan ini.

Siapkan library JQuery, kamu bisa download dari jquery.com atau klik link dibawah ini JQUERY
Siapkan Text Editor atau IDE (integrated development environment) kamu bisa mengunakna Notepad ++, sublime text, visual studo code atau Netbeans
Siapkan File image yang akan digunakan untuk testing nantinya

Ok, jika semua material sudah disiapkan sekarang kita akan memulai pembuatan coding. Disini saya mengunakan Netbeans untuk process pembuatan.
Klik file new projek, projek yang dibuat boleh PHP atau HTML.
Selanjutnya buatlah susuan folder seperti terlihat pada gambar dibawah:

Simpan image untuk value image ketika belum di lakukan upload pada folder img.
simpan file jquery,min.js pada folder lib
Selanjutnya buatlah code pada file indexnya.

Lihat Juga :

Pertama kita panggil jquery dari filder lib kedalam projek kita.


<script src="../lib/jquery.min.js" type="text/javascript"></script>

Selanjutnya buat code pada bagian body


<table width="80%">
 <tr>
  <td width="10%" align="right">Image :</td>
  <td width="80%">
   <input type="file" name="txtFoto" id="txtFoto" onchange="readURL(this);"/>
  </td>
 </tr>
 <tr>
  <td></td>
  <td>
   <div align="left"><img id="blah" class="img-style" src="../img/no-image.png" />
   </div>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Nama :</td>
  <td width="80%">
   <input type="text" name="txtNana" id="txtNama" size="50"/>
  </td>
 </tr>
 <tr>
  <td width="10%" align="right">Alamat :</td>
  <td width="80%">
   <textarea></textarea>
  </td>
 </tr>
</table>

Kemudian buatlah file CSS pada bagian head untuk menyesuaikan tampilan preview nantinya

 
<style>
 .img-style{
  background-color: #eee;
  border: 1px solid #ccc;
  width: 150px;
  height: 150px;
  border-radius: 3px;
  box-shadow: 0 0 0 #999;
 }
</style>

Selanjutnya kita akan buat code Javascript dibagian bawah code tampilan


<script>
 function readURL(input) {
  if (input.files && input.files[0]) {
   if (input.files[0].size / 1024 >= 30000) {
    alert("Ukuran maximal gambar 3 MB");
    document.getElementById("txtFoto").value = null;
   } else {
    var reader = new FileReader();
    reader.onload = function (e) {
     $('#blah').attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
   }
  }
 }
</script>

Nah jika sudah selesai kita akan coba jalankan, klik kana pada file index nya dan run. hasilnya akan muncul dan cobalah upload image, jika image umcul pada tampilan preview maka sudah berhasil
ini adalah tampilan ketika pertama kali dijalankan.

Dan ini tampilan ketika sudah melakukan upload image

Ok segitu aja, selamat mencoba. Untuk file latihannya silahkan download dari link dibawah ini.

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tampilkan Link Download

Tutorial Cara Download File :