Bài 8: Xử lý upload nhiều ảnh với PHP

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

Ok, tiếp tục thôi nào! Ở Topic 5 và 6 chúng ta đã upload 1 ảnh thành công theo cách bình thường và cả Ajax. Thừa thắng xông lên bài viết tiếp theo đây mình sẽ hướng dẫn các bạn upload một lúc nhiều ảnh cho sản phẩm hay bài viết. Tác vụ này được thực hiện trên Php hay kết hợp với Ajax thế nào?. Let’s Go thôi.

Cũng giống như upload 1 ảnh, mình sẽ chia thành 2 phần là upload thông thường và upload có sự có mặt của anh bạn Ajax nhé.

Các bạn quay lại Topic 6 vào file product_add.php, comment cái form mình dùng Ajax và sử dụng lại form cũ thêm vào một thẻ input type = ‘file’ có thêm 2 attributes name="files[]", multiple nhé. Lưu ý muốn upload được nhiều file cần có multiple.

Ta có form

 <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>
        <input type="file" name="files[]" multiple id="upload_file"> <br>
        <button style="cursor: pointer;" type="submit">Add</button>
 </form>

Cũng tại product_add.php các bạn sửa một chút các câu lệnh php phía trên nhé. Trong trường hợp này biến $_FILES của chúng ta sẽ có 2 mảng với 2 keys là “file” và “files”. Các bạn có thê print_r($_FILES) để kiểm tra. Kết quả sẽ kiểu như là:

Đoạn code mình nói ở trên là:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // print_r($_FILES);
    $data = $_POST;
    $file_path = 'upload/';
    $product_images = [];
    foreach ($_FILES['files']['tmp_name'] as $key => $filetmp)
    {
        $fileUrl = $file_path.$_FILES['files']['name'][$key];
        move_uploaded_file($filetmp,$fileUrl);
        array_push($product_images,$fileUrl);
    }
    $product_images_JSON = implode('#',$product_images);
    $product_image = $file_path.$_FILES['file']['name'];
    move_uploaded_file($_FILES['file']['tmp_name'],$product_image);
    $insert_product = $ProductClass ->insert_product($data,$product_images_JSON, $product_image);
  }
?>

Cũng giống như ở topic 6, việc thêm file cũng sẽ cần có 2 bước đó là move_upload_file() và lấy tên kèm đường dẫn để lưu vào database. Tuy nhiên:

Đối với việc upload nhiều ảnh thì cái data là đường dẫn của ảnh sẽ ở dạng mảng array. Do đó trong trường hợp này mình dùng hàm implode() để chuyển nó về string và lưu vào CSDL. Khi cần show ảnh ra frontend thì các bạn dùng hàm explode() để chuyển nó lại về array nhé.

Có một cách nữa để lưu array vào database là các bạn dùng 2 hàm json_encode() và json_decode(). Cách dùng thì cũng tương tự thôi.

Cuối cùng thì mình sẽ được file product_add.php hoàn chỉnh:

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC7\class\ProductClass.php');
$ProductClass = new ProductClass;
?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // print_r($_FILES);
    $data = $_POST;
    $file_path = 'upload/';
    $product_images = [];
    foreach ($_FILES['files']['tmp_name'] as $key => $filetmp)
    {
        $fileUrl = $file_path.$_FILES['files']['name'][$key];
        move_uploaded_file($filetmp,$fileUrl);
        array_push($product_images,$fileUrl);
    }
    $product_images_JSON = implode('#',$product_images);
    $product_image = $file_path.$_FILES['file']['name'];
    move_uploaded_file($_FILES['file']['tmp_name'],$product_image);
    $insert_product = $ProductClass ->insert_product($data,$product_images_JSON, $product_image);
  }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <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>
        <input type="file" name="files[]" multiple id="upload_file"> <br>
        <button style="cursor: pointer;" type="submit">Add</button>
    </form>
</body>
</html>

Tiếp theo mình sẽ sửa lại method insert_product() trong ProductClass.php

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

Và insert thêm một cột vào table product là ‘product_images’

Thêm côt product_images và table product

OK, vậy là chạy được rồi. Các bạn quay ra màn hình để kiểm tra nhé.

À, mình đang làm trên thư mục TOPIC7 nhé. Các bạn nhớ kiểm tra nếu có lõi path do include.

Mình đã thêm thành công, nhưng các bạn có để ý trong table của mình ở mục product_image đang bị lỗi font chữ.

Để xử lý tình huông này bạn sửa font ngay trong phpmyadmin và vào trong file database.php thêm lệnh set_charset("utf8") ngay dưới lệnh new mysqli() nhé:

  $this ->conn = new mysqli($this ->servername, $this -> username, $this -> password,  $this -> databaseName);
    $this ->conn -> set_charset("utf8");

Mình thử lại:

Vậy là mình đã sử lỗi font thành công. Các bạn lưu ý mình cần phải sửa nếu không khi đổ ra frontend sẽ bị lỗi và không hiện thị được ảnh nhé.

OK, vậy là mình insert nhiều ảnh thành công. Còn câu chuyện đổ ra ngoài giao diện người dùng thế nào. Mình sẽ chuyển qua file product_list.php để thực hiện.

Tại product_list.php các bạn thêm cho mình 1 cột th là Images và một cột td tương ứng để mình sẽ dùng vòn lặp foreach để show các ảnh ra.

    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Image</th>
            <th>Images</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>
                <?php $product_images = explode('#',$result['product_images']) ?>
                <?php
                if($product_images) {
                    foreach($product_images as $product_image ) {
                ?>
                    <img style="width:100px" src="<?php echo $product_image?>" alt="">
                <?php
                    }
                }
                ?>
            </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>

Ta có file product_list.php sau khi thay đổi

<?php
$base_url = 'C:\xampp\htdocs';
include_once ($base_url.'\TOPIC7\class\ProductClass.php');
$ProductClass = new ProductClass;
$show_product = $ProductClass ->show_product();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>List Product</title>
</head>
<style>
    table {
        width: 50%;
        border-collapse: collapse;
    }
    table,tr,th,td {
        border: 1px solid grey;
        text-align: center;
    }
</style>
<body>
    <table>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Image</th>
            <th>Images</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>
                <?php $product_images = explode('#',$result['product_images']) ?>
                <?php
                if($product_images) {
                    foreach($product_images as $product_image ) {

                ?>
                    <img style="width:100px" src="<?php echo $product_image?>" alt="">
                <?php
                    }
                }
                ?>
            </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>
</body>
</html>

Và đây là kết quả