test di server

admin/index.html

@@ -99,6 +99,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
+<script src="http://malsup.github.com/jquery.form.js"></script> 
       <script>
       $(document).ready(function(){
     

admin/materi.html

@@ -39,9 +39,14 @@
     <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>
 
+
+
 <script>
   $.getJSON("../getAllTopik.php",function(data){
     var select = document.getElementById("sel1");
@@ -82,21 +87,44 @@
     }
   });
 
-  $("#upload_form").on("submit", function(e){
-    e.preventDefault();
-    $.ajax({
-      url: "../addMateri.php", // Url to which the request is send
-      type: "POST",             // Type of request to be send, called as method
-      data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
-      contentType: false,       // The content type used when sending data to the server.
-      cache: false,             // To unable request pages to be cached
-      processData:false,        // To send DOMDocument or non processed data file it is set to false
-      success: function(data)   // A function to be called if request succeeds
-      {
-        // lakukan pemanggilan api notifikasi
-        alert(data);
+    var bar = $('.bar');
+    var percent = $('.percent');
+       
+    $('form').ajaxForm({
+        beforeSend: function() {
+            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) {
+        alert(xhr.responseText);
       }
-    });
-  });
+    }); 
+  // $("#upload_form").on("submit", function(e){
+  //   e.preventDefault();
+  //   $.ajax({
+  //     url: "../addMateri.php", // Url to which the request is send
+  //     type: "POST",             // Type of request to be send, called as method
+  //     data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
+  //     contentType: false,       // The content type used when sending data to the server.
+  //     cache: false,             // To unable request pages to be cached
+  //     processData:false,        // To send DOMDocument or non processed data file it is set to false
+  //     success: function(data)   // A function to be called if request succeeds
+  //     {
+  //       // lakukan pemanggilan api notifikasi
+  //       alert(data);
+  //     }
+  //   });
+  // });
     
 </script>
\ No newline at end of file