test uploader

admin/materi.html

@@ -5,7 +5,7 @@
   </div>
 </div>
 
-<form action="../addMateri.php" method="POST" id="upload_form" enctype="multipart/form-data">
+<form action="../addMateri.php" method="POST" id="upload_form" enctype="multipart/form-data" class="">
   <div class="form-group">
     <label for="usr">Topik:</label>
     <div class="radio">
@@ -39,13 +39,12 @@
     <input class="input-file" id="PDFinput" type="file" name="pdffile" disabled accept="application/pdf">
   </div>
   <button type="submit" class="btn btn-default">Kirim</button>
-  <div class="progress">
-    <div class="bar"></div>
-    <div class="percent">0%</div>
-  </div>
+  
 </form>
-
-
+<div id="progbar" class="progress d-none">
+  <h6>Uploading ...</h6>
+  <div class="bar progress-bar progress-bar-striped active"></div>
+</div>
 
 <script>
   $.getJSON("../getAllTopik.php",function(data){
@@ -88,25 +87,25 @@
   });
 
     var bar = $('.bar');
-    var percent = $('.percent');
        
     $('form').ajaxForm({
         beforeSend: function() {
+            $('#progbar').removeClass('d-none');
+            $('#upload-form').addClass('d-none');
             var percentVal = '0%';
             bar.width(percentVal)
-            percent.html(percentVal);
         },
         uploadProgress: function(event, position, total, percentComplete) {
             var percentVal = percentComplete + '%';
             bar.width(percentVal)
-            percent.html(percentVal);
         },
         success: function() {
             var percentVal = '100%';
             bar.width(percentVal)
-            percent.html(percentVal);
         },
       complete: function(xhr) {
+        $('#progbar').addClass('d-none');
+        $('#upload-form').removeClass('d-none');
         alert(xhr.responseText);
       }
     });