PHP File Upload dengan Progress bar menggunakan PHP MySQLi

php file upload

Kesempatan kali ini kami akan mencoba membahas bagaimana membuat PHP file upload dengan progress bar menggunakan PHP MySQL. Disini kami menggunakan Bootsrap sebagai tampilan form dan Jquery sebagai animation progress bar.

Progress bar digunakan dalam sebuah sistem ketika pengguna ingin mnegetahu sejauh mana progress file yang mereka upload kedalam sistem.

Langsung saja kita masuk kedalam pembahasan inti.

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

2. 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;

3. Buta file dengan nama conn.php file ni sebagai koneksi kedatabase.

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

4. 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://jasawebsite.ooo/">jasawebsite</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>

5. 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 mendownload filenya pada link download dibawah ini.

Silahakn ajukan pertanyaan terkait apa yang kami share di atas, kami harap ini berguna bagi anda semua.

Leave a Reply

Your email address will not be published. Required fields are marked *