Tệp tải lên thanh tiến trình PHP

Tính năng tải tệp lên là chức năng được sử dụng nhiều nhất cho ứng dụng web động. Chức năng tải lên tệp có thể dễ dàng thực hiện bằng PHP. Nói chung, trang được làm mới khi bạn tải tệp lên bằng PHP. Để làm cho tệp tải lên này thân thiện với người dùng, jQuery và Ajax có thể được sử dụng để tải tệp/hình ảnh lên mà không cần làm mới trang

Trong khi tệp đang tải lên máy chủ, trang web vẫn ở trạng thái tải. Người dùng rất khó theo dõi tiến trình tải lên. Thanh tiến trình rất hữu ích để khắc phục sự cố này bằng cách hiển thị tiến trình tải lên ở định dạng con người có thể đọc được. Thanh tiến trình là một phần tử đồ họa trực quan hóa tiến trình của một thao tác. Nói chung, thanh tiến trình được sử dụng để hiển thị biểu diễn tiến trình ở định dạng phần trăm để tải lên, tải xuống hoặc cài đặt. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tải tệp lên bằng PHP và tạo thanh tiến trình bằng jQuery và Ajax

Trong thanh tiến trình ajax ví dụ với tập lệnh phần trăm, chúng tôi sẽ triển khai chức năng sau

• Biểu mẫu HTML để chọn tệp
• Hiển thị thanh tiến trình khi quá trình tải lên đang diễn ra bằng cách sử dụng jquery
• Thêm phần trăm hoàn thành tải lên vào thanh tiến trình theo thời gian thực bằng cách sử dụng Ajax
• Tải tệp lên máy chủ bằng PHP

Trước khi bắt đầu tích hợp tải tệp lên với thanh tiến trình, hãy xem cấu trúc tệp

php_file_upload_with_progress_bar_jquery/
├── index.html
├── upload.php
├── uploads/
├── js/
│   └── jquery.min.js
├── css/
│   └── style.css
└── images/

Biểu mẫu tải lên tệp có thanh tiến trình

Tệp index.html xử lý các thao tác chọn tệp và hiển thị tiến trình tải lên trực tiếp

Biểu mẫu tải tệp lên.
1. Tạo biểu mẫu HTML với trường nhập tệp và nút gửi.

• Thẻ phải chứa các thuộc tính enctype="multipart/form-data"
• Thẻ phải chứa type="file"

2. Xác định một phần tử HTML để hiển thị thanh tiến trình

3. Xác định một phần tử HTML để hiển thị trạng thái tải lên tệp

Tải lên tệp Ajax với Thanh tiến trình.
JQuery và Ajax được sử dụng để tải tệp lên bằng thanh tiến trình, vì vậy hãy bao gồm thư viện jQuery trước.

Mã jQuery sau gửi dữ liệu tệp đã chọn tới tập lệnh phía máy chủ mà không cần tải lại trang qua Ajax

• Khi gửi biểu mẫu, dữ liệu tệp đã chọn được gửi đến tập lệnh phía máy chủ (upload.php) bằng jQuery và Ajax
  • Tùy chọn
    0 của phương pháp
    1 được sử dụng để theo dõi tiến trình tải lên
  • Phương thức
    2 tạo một đối tượng XMLHttpRequest mới
  • Sự kiện
    0 của thuộc tính XMLHttpRequest
    1 cho biết số lượng tiến trình đã đạt được cho đến nay
  • Phần trăm tiến trình tải lên được gắn vào thanh tiến trình
• Đối tượng FormData được sử dụng để lấy dữ liệu tệp đã gửi
  • Dựa trên phản hồi, trạng thái tải lên được hiển thị trên trang web
• Khi có sự kiện thay đổi, loại tệp được xác thực dựa trên các loại được phép
  • API tệp được sử dụng để lấy loại tệp đã chọn
  • Loại MIME của tệp đã chọn được xác thực và hạn chế người dùng chỉ tải lên hình ảnh (. jpeg/. jpg/. png/. gif) hoặc PDF (. pdf) hoặc MS Word (. tài liệu /. tệp docx)
  • Phương thức
    2 xác định xem mảng allowTypes có chứa loại tệp đã chọn hay không

Tải tệp lên máy chủ bằng PHP

Tệp upload.php được gọi bởi yêu cầu Ajax để xử lý quá trình tải tệp lên bằng PHP

• Truy xuất thông tin tệp từ dữ liệu đã đăng bằng phương thức PHP $ _FILES
• Tải tệp lên máy chủ bằng hàm move_uploaded_file() trong PHP
• Kết xuất trạng thái tải lên tệp trở về hàm thành công Ajax

$upload = 'err';
if(!empty($_FILES['file'])){
    // File upload configuration
    $targetDir = "uploads/";
    $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif');



    $fileName = basename($_FILES['file']['name']);
    $targetFilePath = $targetDir.$fileName;
    // Check whether file type is valid
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
    if(in_array($fileType, $allowTypes)){
        // Upload file to the server
        if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){
            $upload = 'ok';
        }
    }
}
echo $upload;
?>

Tải lên nhiều hình ảnh mà không cần làm mới trang bằng jQuery Ajax và PHP

Phần kết luận

Thanh tiến trình cung cấp cách thân thiện với người dùng để hiển thị trạng thái hoàn thành tải lên trong thời gian thực. Bạn có thể thêm thanh tiến trình jQuery để tải lên tệp và hiển thị thanh tiến trình phần trăm trong khi tệp đang tải lên máy chủ. Thanh tiến trình có thể được thêm vào bất kỳ loại tệp tải lên nào (hình ảnh, pdf, doc, docx, âm thanh, video, v.v.) trong PHP. Mã ví dụ của chúng tôi giúp bạn dễ dàng tạo thanh tiến trình với tỷ lệ phần trăm cho các thao tác tải lên, tải xuống và cài đặt

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?

Làm cách nào để thêm thanh tiến trình vào tệp tải lên trong PHP?

Kiểm soát tải lên tệp trong PHP là gì?

Làm cách nào để tạo thanh tiến trình để chèn dữ liệu trong PHP bằng AJAX?

Làm cách nào để tải tệp lên trong jQuery?