Tìm kiếm

Code Upload Image PHP MySQL

Code Upload Image PHP MySQL

Tác giả server360, T.M.Một 27, 2018, 02:58:47 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 5 Khách đang xem chủ đề.

Tạo trang in
Xuống cuối trang Trang1
User actions
T.M.Một 27, 2018, 02:58:47 CHIỀU
Code Upload Image PHP MySQL


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 tập tin.

Ngoài ra, các bạn còn có thể xoá các tập tin này trên host cũng như trong dữ liệu.


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


  • folder uploads là nơi mà các tập tin được tải sẽ nằm tại đây.
  • config.php tập tin cấu hình kết nối cơ sở dữ liệu
  • delete.php tập tin dùng để thực thị lệnh xoá tập tin.
  • index.php tập tin 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 tập tin 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:

Mã nguồn [Chọn]
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 tập tin.

config.php: tập tin này chỉ chứa các đoạn kết nối csdl.

Mã nguồn [Chọn]
<?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.

Mã nguồn [Chọn]
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 tập tin config.php vào ngay dòng đầu tiên.
 
Mã nguồn [Chọ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>.

Mã nguồn [Chọn]
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="httpss://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 
<!-- Optional theme -->
<link rel="stylesheet" href="httpss://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="httpss://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:

Mã nguồn [Chọn]
<form class="form-signin" method="POST" enctype="multipart/form-data">
            <h2 class="form-signin-heading">Upload tập tin</h2>
            <div class="form-group">
            <label for="Inputtập tin">tập tin input</label>
            <input type="tập tin" name="tập tin" id="Inputtập tin">
            <p class="help-block">Upload JPEG tập tins 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>
Cũng tại tập tin này, chúng ta sẽ chèn câu lệnh PHP dùng để upload tập tin, 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.

Mã nguồn [Chọn]
<?php
    // gioi han tập tin upload khong qua 100kb
    $max_size = 100000;
 
    // lay thong tin tập tin upload
    $name = $_tập tinS['tập tin']['name'];
    $size = $_tập tinS['tập tin']['size'];
    $type = $_tập tinS['tập tin']['type'];
 
    if(isset($name) && !empty($name)){
 
    // lay duoi tập tin
    $extension = substr($name, strpos($name, '.') + 1);
 
    // kiem tra xem co dung la tập tin hinh anh hay khong
    if(($extension == "jpg" || $extension == "jpeg") && $type == "image/jpeg" && $extension == $size<=$max_size){
        $location = "uploads/";
        if(move_uploaded_tập tin($name, $location.$name)){
            $smsg = "Upload thành công !";
            // dua thong tin tập tin 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ợ tập tin JPEG và dung lượng không quá 100 KiloBytes";
    }
 
    }else{
        $fmsg = "Chọn tập tin upload";
    }
?>
Đoạn php bên trên có tác dụng chọn lọc tập tin upload, trong bài viết này, mình chỉ cho phép upload ảnh JPG và tập tin 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 tập tin đã upload theo bảng sau.

Mã nguồn [Chọn]
<?php require_once 'config.php';?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tạo chức năng upload tập tin 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 Deletetập tin(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[/url]</td>
        <td><a href="#" onclick='Deletetập tin(<?php echo $r['id'] ?>)'>Delete[/url]</td>
      </tr>
      <?php
        }
      ?>
    </tbody>
  </table>
  <div style="text-align:center"><a href="index.php"><< Quay Lại Trang Upload[/url]</div>
</div>
 
</body>
</html>
delete.php: Trong tập tin này, chúng ta sẽ viết câu lệnh xoá tập tin trong folder uploads trước, rồi mới xoá phần cơ sở dữ liệu.

Mã nguồn [Chọn]
<?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 tập tin 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");
 
}
 
?>
Liên kết tải mã nguồn:


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.
Tạo trang in
Lên đầu trang Trang1
User actions

Code Upload Image PHP MySQL