Bài 6: Xử lý upload file Ảnh trong php

Đăng bởi: Minacode|Cập nhật:10-12-2023

Ok, tiếp tục thôi nào! Hôm nay ta sẽ bước qua một chủ đề khá hay và rất quan trọng đó là upload file ảnh. Khi các bạn lập trình web bán hàng thì ảnh là một phần không thể thiếu đúng ko? đó có thể là ảnh slider, thumnail, ảnh sản phẩm... Vậy thì còn chờ j nữa. Let’s Go thôi.

Ở đây việc upload file ảnh mình sẽ chia ra 2 hướng đó là mình sẽ upload bình thường bằng PHP và một hướng khác đó là upload ảnh với Ajax. Vậy thực hư câu chuyện đây là gì. Tiếp theo nào

Hướng 1: Upload ảnh không cần biết Ajax là ông nội nào

Bạn cần lưu ý để upload ảnh qua form thì bạn cần thêm thuộc tính enctype="multipart/form-data" cho nó. Đồng thời mình sẽ thêm một thẻ input có type = “file” vào form như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Product</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="text" placeholder="product_name" name="product_name"> <br>
        <input type="text" placeholder="product_price" name="product_price"> <br>
        <input type="file" name="file" id="upload_file"> <br>
        <button style="cursor: pointer;" type="submit">Add</button>
    </form>
</body>
</html>

Cũng trong file product_add.php mình sẽ comment câu lệnh insert và var_dump($_FILES) xem chúng ta có j nhé!

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST;
var_dump($_FILES);
// $insert_product = $ProductClass -> insert_product($data);
}
?>

Mình đã thử upload 1 file ảnh tên là admin1.jpg.

Kết quả trả về của hàm var_dump khi upload ảnh

Kết quả trả về là một mảng đúng không nào. Việc tiếp theo của chúng ta sẽ có 2 đầu việc như sau:

1, Lưu file ảnh tự bộ nhớ tạm vào thư mục chúng ta mong muốn

2, Lưu tên của ảnh kèm đường dẫn vào database để khi cần đổ ra giao diện.

Mình thực hiện bước 1 trước nhé! Trước tiên mình sẽ tạo một thư mục upload để chứa ảnh và thực hiện câu lệnh move_uploaded_file()

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST;
$file = $_FILES;
$file_path = 'upload/';
move_uploaded_file($file['file']['tmp_name'],$file_path.$file['file']['name']);
// $insert_product = $ProductClass -> insert_product($data);
}
?>

Bạn tiến hành upload và summit form để kiểm tra kết quả nhé:

Bạn có thấy trong forder upload của mình có xuất hiện 1 chiếc ảnh nhỏ nhắn xin xắn có tên admin1.jpg đấy không. Quá dễ nhỉ!

Bước 2 tiếp theo chúng ta sẽ lấy thông tin tên kèm đường dẫn của ảnh để lưu vào database là xong

Bây giờ mình sẽ thực hiện lệnh insert_product() nhưng lần này nó sẽ mang theo một biến nữa là biến $fileurl là đường dẫn của ảnh.

File product_add.php hiện tại:

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC5\class\ProductClass.php');
$ProductClass = new ProductClass;
?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST;
$file = $_FILES;
$file_path = 'upload/';
move_uploaded_file($file['file']['tmp_name'],$file_path.$file['file']['name']);
$fileurl = $file_path.$file['file']['name'];
$insert_product = $ProductClass -> insert_product($data,$fileurl);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Product</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="text" placeholder="product_name" name="product_name"> <br>
        <input type="text" placeholder="product_price" name="product_price"> <br>
        <input type="file" name="file" id="upload_file"> <br>
        <button style="cursor: pointer;" type="submit">Add</button>
    </form>
</body>
</html>

Đến đây chưa xong đâu nhé các bạn. Tiếp tục mình sẽ cần sửa một chút method insert_product ở file ProductClass.php

public function insert_product($data,$fileurl) {
    $product_name = $data['product_name'];
    $product_price = $data['product_price'];
    $product_image = $fileurl;
    $query = "INSERT INTO product (product_name, product_price, product_image)
    VALUES ('$product_name','$product_price','$product_image')";
    $result = $this -> Database-> insert($query);
    return $result;
}

và chèn thêm một cột product_image vào table product. Rất quan trọng nhé.

Các bạn ra lại màn hình và thự hiện submit form lại. Bao thành công nhé!

Ok, bây giờ ảnh đã được lưu vào database thành công, vậy thì trong cái product_list.php mình show nó luôn cho nó nóng hổi nhé! Let’s go tiếp thôi

Các bạn qua file product_list.php để thêm một cột th có nội dung image và một cột td tương ứng chứa một thẻ img trong table như sau:

  <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Image</th>
            <th>Option</th>
        </tr>
    <?php
    if($show_product -> num_rows >0){while($result = $show_product -> fetch_assoc()){
    ?>
        <tr>
            <td><?php echo $result['product_id'] ?></td>
            <td> <?php echo $result['product_name'] ?></td>
            <td><?php echo number_format($result['product_price']) ?></td>
            <td>
                <img style="width:100px" src="<?php echo $result['product_image'] ?>" alt="">
            </td>
            <td>
                <a href="product_edit.php?product_id=<?php echo $result['product_id'] ?>">Edit</a>|
                <a onclick="removeRow(product_id=<?php echo $result['product_id']?>,url='product_delete.php')" href="#">Delete</a>
            </td>
        </tr>
    <?php
    }}
    ?>
    </table>

Và thành quả chúng ta có được là:

Hy vọng các bạn nhận ra sản phẩm trong hình là gì chứ. hehe

Đến đây mình có bài tập cho các bạn đây. Các bạn nhìn lại file product_add.php

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC5\class\ProductClass.php');
$ProductClass = new ProductClass;
?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST;
$file = $_FILES;
$file_path = 'upload/';
move_uploaded_file($file['file']['tmp_name'],$file_path.$file['file']['name']);
$fileurl = $file_path.$file['file']['name'];
$insert_product = $ProductClass -> insert_product($data,$fileurl);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Product</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="text" placeholder="product_name" name="product_name"> <br>
        <input type="text" placeholder="product_price" name="product_price"> <br>
        <input type="file" name="file" id="upload_file"> <br>
        <button style="cursor: pointer;" type="submit">Add</button>
    </form>
</body>
</html>

Việc đưa code chỗ upload ảnh và lấy đường dẫn các bạn hãy bê qua xử lý ở trong ProductClass luôn cho nó gọn nhé. Làm thế nào thì quá dễ rồi đúng ko? Let's do HoME WORK!

Xin chào và hẹn các bạn bài tiếp. Đừng quên để lại ý kiến phía dưới nhé!