Tải Lên Tệp Bằng Dropzone Với Thanh Tiến Trình

Hầu hết các ứng dụng đều có yêu cầu tải tệp lên máy chủ. Trong các bài viết trước, chúng ta đã thấy nhiều phương pháp tải tệp lên với các tính năng có giá trị.

Ví dụ: chúng tôi đã học cách tải tệp lên có hoặc không có AJAX, xác thực tệp đã tải lên và nhiều tính năng khác.

Hướng dẫn này sẽ chỉ ra cách mã để tải lên tệp bằng thanh tiến trình của Dropzone.

Xem bản trình diễn

Nếu kích thước tệp lớn, sẽ mất vài nano giây để hoàn thành. Hiển thị thanh tiến trình trong quá trình tải tệp lên là một cách tiếp cận thân thiện với người dùng.

Cuối cùng, các trang web bắt đầu hiển thị phần trăm tiến trình tải lên. Đây là cách thể hiện tốt nhất cho thấy rằng yêu cầu tải lên đang được tiến hành.

thanh tiến trình dropzone

Mục lục

Giới thiệu về Dropzone

Dropzone là một thư viện JavaScript nổi tiếng với tính năng tải lên tệp và các tính năng liên quan. Nó có một thị phần rộng lớn so với các thư viện khác như vậy.

Nó cung cấp một danh sách lớn các tính năng. Một số tính năng hấp dẫn được liệt kê dưới đây.

Nó hỗ trợ tải lên nhiều tập tin.
Nó đại diện cho trạng thái tiến triển và tỷ lệ phần trăm.
Nó cho phép thay đổi kích thước hình ảnh trình duyệt. Đó là một tính năng có giá trị hỗ trợ chỉnh sửa nội tuyến hình ảnh.
Xem trước hình ảnh ở dạng hình thu nhỏ.
Nó hỗ trợ định cấu hình giới hạn kích thước và loại tệp đã tải lên.

Cách tích hợp dropzone.js để tải lên với thanh tiến trình

Tích hợp Dropzone vào một ứng dụng rất đơn giản. Đó là tất cả về việc giữ hai điểm này trong quá trình tích hợp.

Ánh xạ phần tử giao diện người dùng với khởi tạo Dropzone.
Xử lý các cuộc gọi lại sự kiện tải lên một cách hiệu quả.

Ánh xạ phần tử giao diện người dùng với khởi tạo Dropzone

Đoạn mã dưới đây có chế độ xem HTML để hiển thị tệp Dropzone tải lên giao diện người dùng. Nó bao gồm Dropzone JS và CSS thông qua URL CDN.

<!DOCTYPE html>
<html>

<head>
    <title>File Upload using Dropzone with Progress Bar</title>
    <link rel="stylesheet" type="text/css"
        href="
    <style>
        .progress {
            width: 300px;
            border: 1px solid #ddd;
            padding: 5px;
        }

        .progress-bar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="form.css" />
</head>

<body>
    <div class="PHP-container tile-container text-center">
        <h2>File Upload using Dropzone with Progress Bar</h2>
        <form action="upload.php" class="dropzone" id="myDropzone"></form>
    </div>
    <script src="
</body>

</html>

Phần tử biểu mẫu tải lên tệp được ánh xạ tới DropzoneJS trong khi khởi tạo thư viện.

Hành động biểu mẫu nhắm mục tiêu điểm cuối PHP để xử lý tệp tải lên.

Dropzone.options.myDropzone = {
   //Set upload properties
    
    init: function () {
        // Handle upload event callback functions
   };        
};

Xử lý các cuộc gọi lại sự kiện tải lên

Phần này có script thư viện Dropzone để đưa vào view. Tập lệnh này đặt thuộc tính tệp và giới hạn cho quá trình tải lên. Một số thuộc tính là,

maxFilesize – Kích thước tối đa cho phép tệp tải lên.
paramName – Tên tệp đầu vào để truy cập như $_FILE[‘paramName here’].
maxFiles – Cho phép đếm số lượng tệp.
Các tệp được chấp nhận – Cho phép các loại tệp hoặc phần mở rộng.

Các trong đó thuộc tính của tập lệnh này cho phép xử lý sự kiện tải lên. Tên sự kiện được liệt kê dưới đây.

uploadprogress – Để theo dõi phần trăm tải lên để cập nhật thanh tiến trình.
thành công – Khi yêu cầu tải tệp lên hoàn tất. Điều này tương tự như các lệnh gọi lại thành công/lỗi của tập lệnh jQuery AJAX.

Tùy chọn dropzone có tham chiếu biểu mẫu tải lên để lắng nghe sự kiện thả tệp. Hàm gọi lại nhận trạng thái tải lên để cập nhật giao diện người dùng.

Dropzone gọi hành động điểm cuối khi thả tệp vào vùng thả.

Khu vực thả sẽ hiển thị hình thu nhỏ hoặc bản xem trước tệp với thanh tiến trình.

Dropzone.options.myDropzone = {
            paramName: "file", // filename handle to upload
            maxFilesize: 2, // MB
            maxFiles: 1, // number of files allowed to upload
            acceptedFiles: ".png, .jpg, .jpeg, .gif", // file types allowed to upload

            init: function () {
                this.on("uploadprogress", function (file, progress) {
                    var progressBar = file.previewElement.querySelector(".progress-bar");
                    progressBar.style.width = progress + "%";
                    progressBar.innerHTML = progress + "%";
                });

                this.on("success", function (file, response) {
                    var progressBar = file.previewElement.querySelector(".progress-bar");
                    progressBar.classList.add("bg-success");
                    progressBar.innerHTML = "Uploaded";
                });

                this.on("error", function (file, errorMessage) {
                    var progressBar = file.previewElement.querySelector(".progress-bar");
                    progressBar.classList.add("bg-danger");
                    progressBar.innerHTML = errorMessage;
                });
            }
        };

Tập lệnh tải lên tệp PHP

Đây là bộ tập lệnh tải lên tệp PHP điển hình cho bất kỳ yêu cầu tải lên tệp nào. Nhưng, những thay đổi phụ thuộc là,

Tên xử lý tệp ($_FILES[‘File handle name’]).
Đường dẫn thư mục đích cho biến $uploadDir.

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // file to be uploaded to this directory
    // should have sufficient file permissions
    $uploadDir="uploads/";

    // unique file name generated for the uploaded file
    $fileName = uniqid() . '_' . $file['name'];

    // moving the uploaded file from temp directory to uploads directory
    if (move_uploaded_file($file['tmp_name'], $uploadDir . $fileName)) {
        echo 'File uploaded successfully.';
    } else {
        echo 'Failed to upload file.';
    }
}

Cách ẩn thanh tiến trình của các tệp đã tải lên

Theo mặc định, lệnh gọi lại Dropzone JS thêm một dz-đầy đủ Bộ chọn lớp CSS cho phần tử dropzone. Nó sẽ ẩn thanh tiến trình khỏi bản xem trước sau khi tải lên thành công.

Hành vi mặc định này là bằng cách thay đổi độ mờ của thanh tiến trình thành 0. Nhưng phần đánh dấu sẽ có trong nguồn. Ẩn và hiện phần tử có thể được thực hiện theo nhiều cách khác nhau.

Nếu bạn muốn xóa phần tử thanh tiến trình khỏi bản xem trước HTML, hãy sử dụng JavaScript di dời() chức năng. Tập lệnh này gọi nó cho phần tử thanh tiến trình trong cuộc gọi lại thành công.

Dropzone.options.myDropzone = {
      ...
      ...

      init: function () {
          ...
          ...

          this.on("success", function (file, response) {
              var progressBar = file.previewElement.querySelector(".progress-bar");
              progressBar.remove();
          });

          ...
          ...
      }
};

Xem demo Tải về

↑ Quay lại Đầu trang

Xem thêm tin mới và bổ ích tại:

– Kiến thức gia đình

– Tri thức đời sống

– Kênh youtube Kiến thức gia đình

Lập trình PHP

Tải lên tệp bằng Dropzone với Thanh tiến trình – PHP