본문 바로가기

BootStrap/Bootstrap Sample File

MULTI UPLOAD AND DELETE FILE WITH PHP MYSQLI AND BOOTSTRAP


At this meeting I will discuss how to create a file upload using php mysql and the design of which is a framework bootstrap html/css template for the creation of a website .




Immediately, I will explain how to make an application to upload these files , the first thing you should do is to design a layout file upload with subsequent bootstrap create a new database in mysql sql server or the like syntax below .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
--
-- Database: `<span id="IL_AD11" class="IL_AD">biodata</span>`
--
 
CREATE TABLE IF NOT EXISTS `upload_data` (
`id_upload` int(5) NOT NULL,
  `file_name` varchar(200) NOT NULL,
  `file_size` varchar(200) NOT NULL,
  `file_type` varchar(200) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;
 
ALTER TABLE `upload_data`
 ADD PRIMARY KEY (`id_upload`);
 
ALTER TABLE `upload_data`
MODIFY `id_upload` int(5) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;

To connect then create a new file with the name "config.php".

1
2
3
4
5
6
<?php
$mysqli = new mysqli("localhost", "root", "pidie", "biodata");
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: " . $mysqli->connect_error;
}
?>

Then make the index.php file that contains the design files uploaded using the bootstrap and how to display data and delete files and image files in addition to the right .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Upload File Images</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <p>
</p>
    <div class="container">
      <form action="upload.php" <span id="IL_AD6" class="IL_AD">method</span>="POST" enctype="multipart/form-data">
 <div class="form-group">
   <label for="InputFile">Upload File</label>
   <input type="file" name="files[]" multiple id="InputFile">
   <p class="help-block">Upload Multi File Images</p>
 </div>
 <button type="<span id="IL_AD7" class="IL_AD">submit</span>" class="btn btn-primary">Upload</button>
      </form>
      <p>
</p>
      <ul class="media-list">
      <?php
      include "<span id="IL_AD10" class="IL_AD">config</span>.php";
      $res = $mysqli->query("SELECT * FROM upload_data");
      while ($row = $res->fetch_assoc()):
      ?>
 <li class="media">
   <a class="media-left" href="#">
     <img width="64px" src="upload/<?php echo $row['file_name'] ?>" alt="<?php echo $row['file_name'] ?>">
   </a>
   <div class="media-body">
     <h4 class="media-heading"><?php echo $row['file_name'] ?></h4>
     <?php echo $row['id_upload'] ?>|<?php echo $row['file_size'] ?>|<?php echo $row['file_type'] ?> <a href="delete.php?id=<?php echo $row['id_upload'] ?>&nm=<?php echo $row['file_name'] ?>">Delete</a>
   </div>
 </li>
      <?php
      endwhile;
      ?>
      </ul>
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Next create upload.php file to upload a file along with a new folder called "upload".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
include "config.php";
if(isset($_FILES['files'])){
    $errors= array();
 foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
  $file_name = $key.$_FILES['files']['name'][$key];
  $file_size =$_FILES['files']['size'][$key];
  $file_tmp =$_FILES['files']['tmp_name'][$key];
  $file_type=$_FILES['files']['type'][$key];
        if($file_size > 2097152){
   $errors[]='<span id="IL_AD2" class="IL_AD">File size</span> must be less than 2 MB';
        
        $query="INSERT into upload_data VALUES('','$file_name','$file_size','$file_type'); ";
        $desired_dir="upload";
        if(empty($errors)==true){
            if(is_dir($desired_dir)==false){
                mkdir("$desired_dir", 0700);  // Create directory if it does not exist
            }
            if(is_dir("$desired_dir/".$file_name)==false){
                move_uploaded_file($file_tmp,"upload/".$file_name);
            }else{         //rename <span id="IL_AD5" class="IL_AD">the file</span> if another one exist
                $new_dir="upload/".$file_name.time();
                 rename($file_tmp,$new_dir) ;   
            }
             
            $mysqli->query($query);  
        }else{
                echo $errors;
        }
    }
 if(empty($error)){
  echo "<script>alert('Success');location.href='index.php';</script>";
   
 }
}
?>

After that create delete.php files to delete data from the database and disk.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
include "config.php";
if(isset($_GET['id'])):
  $hap = unlink('upload/'.$_GET['nm']);
  if($hap){
     $stmt = $mysqli->prepare("DELETE FROM upload_data WHERE id_upload=?");
     $stmt->bind_param('s', $id);
 
     $id = $_GET['id'];
 
     if($stmt->execute()):
          echo "<script>location.href='index.php'</script>";
     else:
          echo "<script>alert('".$stmt->error."')</script>";
     endif;
  } else{
    echo "<script>alert('No Delete File From Harddisk')</script>";
    echo "<script>location.href='index.php'</script>";
  }
endif;
?>