Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="utf-8">
  8.     <title>Contoh Progress Bar Upload dengan Ajax dan Bootstrap 3</title>
  9.     <link href="<?php echo base_url();?>assets/css/bootstrap.css" rel="stylesheet">
  10.     <style type="text/css">
  11.  
  12.     ::selection { background-color: #E13300; color: white; }
  13.     ::-moz-selection { background-color: #E13300; color: white; }
  14.  
  15.     body {
  16.         background-color: #fff;
  17.         margin: 40px;
  18.         font: 13px/20px normal Helvetica, Arial, sans-serif;
  19.         color: #4F5155;
  20.     }
  21.  
  22.     a {
  23.         color: #003399;
  24.         background-color: transparent;
  25.         font-weight: normal;
  26.     }
  27.  
  28.     h1 {
  29.         color: #444;
  30.         background-color: transparent;
  31.         border-bottom: 1px solid #D0D0D0;
  32.         font-size: 19px;
  33.         font-weight: normal;
  34.         margin: 0 0 14px 0;
  35.         padding: 14px 15px 10px 15px;
  36.     }
  37.  
  38.     code {
  39.         font-family: Consolas, Monaco, Courier New, Courier, monospace;
  40.         font-size: 12px;
  41.         background-color: #f9f9f9;
  42.         border: 1px solid #D0D0D0;
  43.         color: #002166;
  44.         display: block;
  45.         margin: 14px 0 14px 0;
  46.         padding: 12px 10px 12px 10px;
  47.     }
  48.  
  49.     #body {
  50.         margin: 0 15px 0 15px;
  51.     }
  52.  
  53.     p.footer {
  54.         text-align: right;
  55.         font-size: 11px;
  56.         border-top: 1px solid #D0D0D0;
  57.         line-height: 32px;
  58.         padding: 0 10px 0 10px;
  59.         margin: 20px 0 0 0;
  60.     }
  61.  
  62.     #container {
  63.         margin: 10px;
  64.         border: 1px solid #D0D0D0;
  65.         box-shadow: 0 0 8px #D0D0D0;
  66.     }
  67.     </style>
  68.    
  69. </head>
  70. <body>
  71. <div id="container">
  72.     <h1>Contoh Progress Bar Upload dengan Ajax dan Bootstrap 3</h1>
  73.  
  74.  
  75.     <div id="body">
  76.        
  77.        
  78.        
  79.     <?php
  80.     if($this->session->userdata('status_upload')!=null){
  81.     echo $this->session->userdata('status_upload');  // menampilkan pesan error upload
  82.     }
  83.  
  84.     if($this->session->userdata('status_hapus')!=null){
  85.     echo $this->session->userdata('status_hapus');  // menampilkan pesan error upload
  86.     }
  87.  
  88.     if(!isset($page)){
  89.         $this->load->view('daftar_file');
  90.     } else{
  91.         $this->load->view($page);
  92.     }
  93.    
  94.    
  95.    
  96.    
  97.     if($this->session->userdata('status_upload')!=null){ // menghapus pesan error upload
  98.     $this->session->unset_userdata('status_upload');
  99.     }
  100.  
  101.     if($this->session->userdata('status_hapus')!=null){ // menghapus pesan error upload
  102.     $this->session->unset_userdata('status_hapus');
  103.     }
  104.     ?>
  105.  
  106.     </div>
  107.  
  108.     <p class="footer">Visit My Blog <b><a href="http://ozs.web.id" target="_blank">http://ozs.web.id</a></b> :: Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
  109. </div>
  110.  
  111. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  112. <script src="<?php echo base_url();?>assets/js/bootstrap.js"></script>
  113. <script src="<?php echo base_url();?>assets/js/filestyle.js" type="text/javascript"></script>
  114.  
  115. <script>
  116.  
  117. function uploadFile() {
  118.     var file = document.getElementById("fileku").files[0];
  119.     var formdata = new FormData();
  120.     formdata.append("file_nya", file);
  121.     var ajax = new XMLHttpRequest();
  122.     ajax.upload.addEventListener("progress", progressUpload, false);
  123.     ajax.open("POST", "<?php echo site_url('upload/do_upload');?>", true);
  124.     ajax.send(formdata);
  125. }
  126.  
  127. function progressUpload(event){
  128.     var percent = (event.loaded / event.total) * 100;
  129.     document.getElementById("progress-bar").style.width = Math.round(percent)+'%';    
  130.     document.getElementById("status").innerHTML = Math.round(percent)+"% kumplit bro";
  131.     if(event.loaded==event.total){
  132.         window.location.href = '<?php echo base_url();?>';
  133.     }
  134. }
  135.  
  136. </script>
  137. </body>
  138. </html>