Upload file dengan progress bar menggunakan PHP

Bagaimana kabar kalian, semoga hari-hari anda sebagai mahasiswa dan para teman-teman sekalian baik semua.

kali ini kami akan share bagaimana membuat form upload file menggunakan PHP dengan progress bar. Oh ya untuk membuat tutorial ini kami menggunakan bootstrap dan jquery.

Langsung saja mari kita mulai dari awal, Let's it...

Buat folder dengan nama upload file ini berfungsi sebagai folder dimana file yang di upload akan disimpan.

Berikutnya buat database dengan nama upload kemudian masukkan struktur database dibawah ini.

 CREATE TABLE `file` (
  `file_id` int(11) NOT NULL,
  `file_name` varchar(100) NOT NULL,
  `location` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Buat file dengan conn.php file ini sebagai koneksi kedatabase.

 <?php
 $conn = mysqli_connect("localhost", "root", "", "upload");
 
 if(!$conn){
  die("Error: Failed to connect to database");
 }
?>

Berikutnya buat file dengan nama index.php file ini berfungsi sebagai form upload gambar.

 <!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  <style type="text/css">
  #progress-bar {
   background-color: red;
   width:0%;
   height:20px;
   -webkit-transition: width .3s;
   -moz-transition: width .3s;
   transition: width .3s;
  }
  #progress-div {
   border:#ccc 1px solid;
   margin:30px 0px;
   border-radius:4px;
   text-align:center;
  }
  </style>
 </head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar navbar-brand" href="https://tutorialswb.com">Tutorialswb</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary">Upload File dengan Progress Bar</h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <form id="upload_form" action="upload.php" method="post">
   <center>
    <div class="form-inline">
     <input name="upload" id="upload" type="file" class="form-control"/>
     <button "btnSubmit" class="btn btn-primary" class="form-control">Upload</button>
    </div>
   </center>
   <div id="progress-div">
    <div id="progress-bar"></div>
   </div>
    <div id="targetLayer" style="display:none;"></div>
  </form>
 </div>
<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/jquery.form.js"></script> 
<script src="js/script.js"></script>
</body>
</html>

Buat file dengan nama upload.php file ini berisi script untuk upload gambar kedatabase

 <?php
 require_once 'conn.php';
 
 if(ISSET($_FILES['upload'])){
  $file_name = $_FILES['upload']['name'];
  $file_temp = $_FILES['upload']['tmp_name'];
  $path = "upload/".$file_name;
 
  if(move_uploaded_file($file_temp, $path)){
   mysqli_query($conn, "INSERT INTO `file` VALUES('', '$file_name', '$path')") or die(mysqli_error());
   echo "<img src=".$path." height='200' width='200'>";
  }
 }else{
  header('location: index.php');
 }
?>

Kalian bisa melihat demonya dan mendownlaod filenya secara langsung dengan menekan button dibawah.

DEMO DOWNLAOD

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda semua, angan lupa share keteman dan orang terdekat anda, Jangan lupa support kami dengan menekan slaah satu iklan yang ada di website ini.

Upload file dengan progress bar menggunakan PHP

Baca Juga