Menampilkan Gambar Sebelum Upload Menggunakan JQuery

Example

kangpepe.com | Selam Sejahtera sahabat Kelascoding, kali ini kita akan melakukan experimen dimana sebelum upload gambar dalam server maka sebaiknya kita menampilkanya terlebih dahulu. Dimana pada tutorial kali ini kita memanfaatkan Javascrip dalam melakukan eksperiment ini.

Baiklah untuk codingnya anda kita menggunakan sedikit dari coding javascrip namun padahalaman form inputnya nanti, anda dapat mencocokan dengan coding yang anda buat.

LANGKAH PEMBUATAN

Buat sebuah file index.php pada directori localhost anda

Copy coding dibawah ini dan letakan pada posisi head dalam html anda.


<head>
<script type="text/javascript">
 function fileValidation(){
  var fileInput = document.getElementById('file');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  if(!allowedExtensions.exec(filePath)){
   alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
   fileInput.value = '';
   return false;
  }else{
   //Image preview
   if (fileInput.files && fileInput.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
     document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
    };
    reader.readAsDataURL(fileInput.files[0]);
   }
  }
 }
</script>
</head>


Dan selanjutnya masukan coding dibawah ini kedalam area body halaman website anda atau halaman form input sesuai nama file anda lalu simpan perubahan.


<body>
 <table width='37%' border='1'>
  <tr><td>CONTOH UPLOAD FOTO KANGPEPE.COM</td></tr>
  <tr><td><input type="file" id="file" onchange="return fileValidation()"/></td></tr>
  <tr><td><div id="imagePreview"></div></td></tr>
 </table>
</body>


Lalu jalankan project anda pada localhost seperti contoh yang saya buat dengan nama directori http://localhost/kangpepe.com/index.php dan upload gambar yang ingin anda upload pada server anda.

Contoh Upload Data


Demikian tutorial singkat ini kita bahas semoga dapat berjumpa di lain waktu, semoga bermanfaat untuk kita pelajari semua. Aminn Allahhumma Amin.
Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »