Loading...

Tạo chức năng upload file với PHP và MySQL

Hello các bạn ! Lúc trước mình có chia sẻ cho các bạn một bài viết Tạo trang upload hình ảnh bằng PHP, nhưng xem ra có rất nhiều bạn gặp vấn đề khi thực thi bài viết này. Hôm nay mình sẽ giới thiệu cho các bạn một cách làm khác, với đầy đủ chức năng hơn, đặc biệt là có thể kết nối cơ sở dữ liệu để lưu trữ thông tin các file. Ngoài ra, các bạn còn có thể xoá các file này trên host cũng như trong dữ liệu.

Tạo chức năng upload file với PHP và MySQL

Xem Demo | Download

Đầu tiên, các bạn tạo các file và folder theo cấu trúc sau :

Tạo chức năng upload file với PHP và MySQL

  • folder uploads : là nơi mà các file được tải sẽ nằm tại đây.
  • config.php : file cấu hình kết nối cơ sở dữ liệu
  • delete.php : file dùng để thực thị lệnh xoá file.
  • index.php : file chứa form upload.
  • style.css : chứa các định dạng css cần thiết.
  • viewfile.php : liệt kê thông tin file sau khi upload.

Để tham khảo, các bạn nên đọc bài viết này để hiểu về kết nối cơ sở dữ liệu mySQL

Tạo database, table và quản lý cơ sở dữ liệu MySQL bằng phpMyAdmin

PHP MySQL: Kết nối cơ sở dữ liệu với MySQL Database

Các bạn vào phpMyAdmin để tạo database, trong bài viết này, mình đặt tên database là dbupload , các bạn có thể tuỳ ý đặt tên theo ý muốn của mình, tiếp theo là tạo bảng theo cấu trúc SQL như sau:

CREATE TABLE IF NOT EXISTS `upload` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(256) NOT NULL,
  `size` int(11) NOT NULL,
  `type` varchar(256) NOT NULL,
  `location` varchar(256) NOT NULL,
  PRIMARY KEY (`id`)
)

Bây giờ chúng ta sẽ viết các đoạn code vào bên trong các file.

config.php

File này chỉ chứa các đoạn kết nối csdl.

<?php
define('DB_HOST', 'ten host');
define('DB_NAME', 'ten csdl');
define('DB_USER','user ket noi csdl');
define('DB_PASSWORD','pass ket noi csdl');
 
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
?>

style.css

Các bạn chèn đoạn css bên dưới dùng để định dạng một số phần tử trong form.

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

index.php

Nhớ là chèn file config.php vào ngay dòng đầu tiên.

<?php require_once 'config.php';?>

Chúng ta sẽ sử dụng thư viện Bootstrap để trang trí cho form, và cũng đỡ mất công cho các bạn phải viết CSS, chèn đoạn code bên dưới vào bên trong thẻ <head>.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<link rel="stylesheet" href="styles.css" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Tiếp theo, các bạn sử dụng cấu trúc form như sau :

<form class="form-signin" method="POST" enctype="multipart/form-data">
        	<h2 class="form-signin-heading">Upload File</h2>
	  		<div class="form-group">
	   		<label for="InputFile">File input</label>
	    	<input type="file" name="file" id="InputFile">
	    	<p class="help-block">Upload JPEG Files với dung lượng nhỏ hơn 100 KiloBytes</p>
	    	<!-- Thong bao loi  -->
	    	<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
			<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
	  </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Upload</button>
 </form>

Cũng tại file này, chúng ta sẽ chèn câu lệnh PHP dùng để upload file, các bạn có thể chèn những đoạn code này bên trên hoặc bên dưới form cũng được.

<?php
	// gioi han file upload khong qua 100kb
	$max_size = 100000;

	// lay thong tin file upload
	$name = $_FILES['file']['name'];
	$size = $_FILES['file']['size'];
	$type = $_FILES['file']['type'];

	if(isset($name) && !empty($name)){

	// lay duoi file
	$extension = substr($name, strpos($name, '.') + 1);

	// kiem tra xem co dung la file hinh anh hay khong
	if(($extension == "jpg" || $extension == "jpeg") && $type == "image/jpeg" && $extension == $size<=$max_size){
		$location = "uploads/";
		if(move_uploaded_file($name, $location.$name)){
			$smsg = "Upload thành công !";
			// dua thong tin file vao csdl
			$query = "INSERT INTO `upload` (name, size, type, location) VALUES ('$name', '$size', '$type', '$location$name')";
			$result = mysql_query($query);
		}else{
			$fmsg = "Upload Thất bại";
		}
	}else{
		$fmsg = "Chỉ hỗ trợ file JPEG và dung lượng không quá 100 KiloBytes";
	}

	}else{
		$fmsg = "Chọn file upload";
	}
?>

Đoạn php bên trên có tác dụng chọn lọc file upload, trong bài viết này, mình chỉ cho phép upload ảnh JPG và file không quá 100Kb, các bạn có thể chỉnh sửa lại thông số này ở biến $max_size.

viewfile.php

Sau khi đã upload và chèn dữ liệu thành công, chúng ta sẽ  hiển thị thông tin những file đã upload theo bảng sau :

<?php require_once 'config.php';?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tạo chức năng upload file với PHP và MySQL</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  function DeleteFile(id) {
    if (confirm("Are you sure?")) {
        // your deletion code
        window.location.href='delete.php?id='+id;
    }
    return false;
  }
</script>
</head>
<body>

<?php 
  $sql = "SELECT * FROM `upload`";
  $result = mysql_query($sql);
?>

<div class="container">
    
  <table class="table">
    <thead>
      <tr>
        <th>S.No</th>
        <th>Name</th>
        <th>Size</th>
        <th>Type</th>
        <th>Location</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      <?php
      // tạo vòng lặp 
         while($r = mysql_fetch_array($result)){
      ?>
      <tr>
        <td scope="row"><?php echo $r['id'] ?></td>
        <td><?php echo $r['name'] ?></td>
        <td><?php echo $r['size'] ?></td>
        <td><?php echo $r['type'] ?></td>
        <td><a href="<?php echo $r['location'] ?>">Download</a></td>
        <td><a href="#" onclick='DeleteFile(<?php echo $r['id'] ?>)'>Delete</a></td>
      </tr>
      <?php
        }
      ?>
    </tbody>
  </table>
  <div style="text-align:center"><a href="index.php"><< Quay Lại Trang Upload</a></div>
</div>

</body>
</html>

delete.php

Trong file này, chúng ta sẽ viết câu lệnh xoá file trong folder uploads trước, rồi mới xoá phần cơ sở dữ liệu.

<?php
require_once 'config.php';

if(isset($_GET['id']) && !empty($_GET['id'])){
	$sql = "SELECT location FROM upload WHERE id=" . $_GET['id'];
	$result = mysql_query($sql);
	$r = mysql_fetch_array($result);
	
	
	// xoa file tren host va csdl
	if(unlink($r['location'])){
		$delsql = "DELETE FROM upload WHERE id=" . $_GET['id'];
		if(mysql_query($delsql)){
			header("Location: viewfile.php"); // di chuyen den trang view.php
		}
	}


}else{
	header("Location: viewfile.php");

}

?>

Mình hy vọng, qua bài viết này, các bạn sẽ không gặp bất kì vấn đề khó khăn nào nữa. Chúc các bạn thực hiện bài viết thành công.

Nguồn: https://www.thuthuatweb.net/php/tao-chuc-nang-upload-file-voi-php-va-mysql.html

Comments

comments

Loading...