Membuat Loading Progress Bar Untuk File Upload

Pada kesempatan kali ini saya akan Membuat Loading Progress Bar Untuk File Upload menggunakan jquery dan php. Dimana progress bar disini akan saya jadikan animasi loading untuk proses upload file. Langkah pertama untuk Membuat Loading Progress Bar Untuk File Upload menggunakan jquery dan php yaitu teman-teman buat satu file baru dengan nama index.php yang berisi struktur html seperti pada script di bawah ini.

<!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.form.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Membuat Loading Progress Bar Untuk File Upload</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading"><b>Membuat Loading Progress Bar Untuk File Upload</b></div>
    <div class="panel-body">
     <form id="uploadImage" action="upload.php" method="post">
      <div class="form-group">
       <label>File Upload</label>
       <input type="file" name="uploadFile" id="uploadFile" accept=".jpg, .png" />
      </div>
      <div class="form-group">
       <input type="submit" id="uploadSubmit" value="Upload" class="btn btn-info" />
      </div>
      <div class="progress">
       <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div id="targetLayer" style="display:none;"></div>
     </form>
     <div id="loader-icon" style="display:none;"><img src="loader.gif" /></div>
    </div>
   </div>
  </div>
 </body>
</html>

Jika sudah maka tahap selanjunya masih di file yang sama, teman-teman buat event submit untuk membantu proses upload file mengguanak jquery seperti pada script di bawah.

<script>
$(document).ready(function(){
 $('#uploadImage').submit(function(event){
  if($('#uploadFile').val()){
   event.preventDefault();
   $('#loader-icon').show();
   $('#targetLayer').hide();
   $(this).ajaxSubmit({
    target: '#targetLayer',
    beforeSubmit:function(){
     $('.progress-bar').width('50%');
    },
    uploadProgress: function(event, position, total, percentageComplete){
     $('.progress-bar').animate({
      width: percentageComplete + '%'
     }, {
      duration: 1000
     });
    },
    success:function(){
     $('#loader-icon').hide();
     $('#targetLayer').show();
    },
    resetForm: true
   });
  }
  return false;
 });
});
</script>

Dan tahap terakhir teman-teman buat file baru dengan nama upload.php untuk membuat proses upload file menggunakan php seperti script di bawah.

<?php

if(!empty($_FILES)){
 if(is_uploaded_file($_FILES['uploadFile']['tmp_name'])){
  sleep(1);
  $source_path = $_FILES['uploadFile']['tmp_name'];
  $target_path = 'upload/' . $_FILES['uploadFile']['name'];
  if(move_uploaded_file($source_path, $target_path)){
   echo '<img src="'.$target_path.'" class="img-thumbnail" width="300" height="250" />';
  }
 }
}

?>

Demikian artikel tentang cara Membuat Loading Progress Bar Untuk File Upload menggunakan Jquery dan PHP. Semoga dapat bermanfaat untuk kalian dan buat kalian yang penasaran bisa langsung mencobanya. Selamat mencoba.

7 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat