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

Nếu bạn muốn tải lên một tệp bằng AJAX và cũng cần hiển thị thanh tiến trình trong quá trình tải lên, thì bạn đã đến đúng trang.

Bài viết này có mã ví dụ để tải lên tệp JavaScript AJAX bằng thanh tiến trình.

Tải lên tệp dựa trên AJAX là yêu cầu cần thiết lặp đi lặp lại đối với ứng dụng web.

Nó dùng để cung cấp tính năng chỉnh sửa nội tuyến với nội dung tệp đã tải lên. Ví dụ: có thể đạt được các tác vụ sau bằng cách sử dụng phương pháp tải lên tệp AJAX.

1. Cập nhật ảnh hoặc banner trên trang hồ sơ.
2. Nhập tệp CSV hoặc Excel để tải nội dung vào bảng dữ liệu.

Mẫu tải lên HTML

HTML này hiển thị đầu vào để chọn tệp. Biểu mẫu này có một nút ánh xạ sự kiện nhấp của nó với trình xử lý AJAX.

Trong hướng dẫn trước, chúng ta đã thấy một ví dụ jQuery để tải lên dữ liệu biểu mẫu với tệp nhị phân đã chọn.

Nhưng trong ví dụ này, HTML không có bất kỳ vùng chứa biểu mẫu nào. Thay vào đó, dữ liệu biểu mẫu được tạo bởi JavaScript trước khi xử lý AJAX.

HTML này có một vùng chứa để hiển thị thanh tiến trình. Sau khi tiến trình hoàn tất 100%, thông báo thành công sẽ được thêm vào giao diện người dùng mà không cần làm mới trang.

<div class="PHP-container tile-container text-center">
    <h2>AJAX File Upload with Progress Bar using JavaScript</h2>
    <input type="file" id="fileUpload" />
    <br>
    <br>
    <button onclick="uploadFile()">Upload</button>
    <div class="progress">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <br>
    <div id="uploadStatus"></div>
</div>

Yêu cầu tải lên tệp AJAX với thanh tiến trình

Phần này là cốt lõi của mã ví dụ này. Các tệp HTML và PHP của ví dụ này rất phổ biến, như đã thấy trong các ví dụ tải lên tệp khác.

Tập lệnh bên dưới thực hiện theo các bước để tải lên tệp AJAX.

1. Nó đọc tệp nhị phân được chọn trong trường nhập tệp.
2. Nó khởi tạo JavaScript FormData và nối tệp nhị phân vào đó.
3. Nó tạo ra một xử lý XMLHttpRequest.
4. Tay cầm này sử dụng thuộc tính ‘upload’ để lấy Đối tượng XMLHttpRequestUpload.
5. Đối tượng XMLHttpRequestUpload này theo dõi tiến trình tải lên theo tỷ lệ phần trăm.
6. Nó tạo trình xử lý sự kiện để cập nhật tỷ lệ phần trăm đang diễn ra và trạng thái tải lên.
7. Cuối cùng, nó đăng tệp lên điểm cuối PHP giống như lập trình AJAX thông thường.

function uploadFile() {
    var fileInput = document.getElementById('fileUpload');
    var file = fileInput.files[0];

    if (file) {
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', function (event) {
            if (event.lengthComputable) {
                var percent = Math.round((event.loaded / event.total) * 100);
                var progressBar = document.getElementById('progressBar');
                progressBar.style.width = percent + '%';
                progressBar.innerHTML = percent + '%';
            }
        });

        xhr.addEventListener('load', function (event) {
            var uploadStatus = document.getElementById('uploadStatus');
            uploadStatus.innerHTML = event.target.responseText;
        });

        xhr.open('POST', 'upload.php', true);
        xhr.send(formData);
    }
}

Điểm cuối PHP để di chuyển tệp đã tải lên vào một thư mục

PHP này có một mã tiêu chuẩn để lưu trữ tệp đã tải lên trong một thư mục bằng cách sử dụng PHP move_uploaded_file(). Liên kết có mã nếu bạn muốn lưu trữ tệp đã tải lên và lưu đường dẫn đến cơ sở dữ liệu.

Điểm cuối này tạo một tên duy nhất cho tên tệp trước khi tải lên. Đó là một thực hành lập trình tốt, nhưng mã cũng sẽ hoạt động mà không có nó.

Nó dùng để dừng ghi đè tệp trong trường hợp tải lên các tệp khác nhau có cùng tên.

Ghi chú: Tạo một thư mục có tên là “uploads” trong thư mục gốc của dự án. Cung cấp đủ quyền ghi.

<?php

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

    // file will be uploaded to the following folder
    // you should give sufficient file permissions
    $uploadDir="uploads/";

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

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

Tải xuống

↑ Quay lại Đầu trang