JQuery Progress Bar untuk File Upload Menggunakan Ajax

pada tanggal

Kali ini saya akan membahas bagaimana cara membuat script PHP untuk upload file dengan progress bar. Adapun konsep dari program ini adalah sama seperti script upload file pada umumnya namun dilengkapi dengan sebuah progress bar yang menggunakan JQuery dan Ajax. Progress bar merupakan tampilan secara grafis yang menunjukkan persen file yang diupload ke server. Berikut caranya.

1. Membuat File index.php
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="jquery.form.min.js"></script>

  <!-- JQuery Form Submit -->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#uploadForm').submit(function(e) { 
        if($('#userImage').val()) {
          e.preventDefault();
          $('#loader-icon').show();
          $(this).ajaxSubmit({
            target:   '#targetLayer',
            beforeSubmit: function() {
              $("#progress-bar").width('0%');
            },
            uploadProgress: function (event, position, total, percentComplete){
              $("#progress-bar").width(percentComplete + '%');
              $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
            },
            success:function (){
              $('#loader-icon').hide();
            },
            resetForm: true
          });
          return false;
        }
      });
    });
  </script>
  <title>Bedah PHP - JQuery Progress Bar untuk File Upload menggunakan Ajax</title>
</head>
<body>
  <style>
    body{width:610px;}
    #uploadForm {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
    #uploadForm label {margin:2px; font-size:1em; font-weight:bold;}
    .demoInputBox{padding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;}
    #progress-bar {background-color: #12CC1A;height:20px;color: #FFFFFF;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;}
    .btnSubmit{background-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
    #progress-div {border:#0FA015 1px solid;padding: 5px 0px;margin:30px 0px;border-radius:4px;text-align:center;}
    #targetLayer{width:100%;text-align:center;}
  </style>

  <!-- Form file upload untuk menampilkan Progress Bar -->
  <form id="uploadForm" action="upload.php" method="post">
    <div>
    <label>Upload Image File:</label>
    <input name="userImage" id="userImage" type="file" class="demoInputBox" />
    </div>
    <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
    <div id="progress-div"><div id="progress-bar"></div></div>
    <div id="targetLayer"></div>
  </form>
  <div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>
</body>
</html>
2. Membuat File upload.php
<?php
if(!empty($_FILES)) {
  if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
    $sourcePath = $_FILES['userImage']['tmp_name'];
    $targetPath = "images/".$_FILES['userImage']['name'];
  if(move_uploaded_file($sourcePath,$targetPath)) {
  ?>
    <img src="<?php echo $targetPath; ?>" width="100px" height="100px" />
    <?php
    }
  }
}
?>
Direktori File
 DOWNLOAD SOURCE CODE DISINI

Komentar

Posting Komentar