Upload AJAX hiển thị Progress Bar bằng Javascript

Nếu bạn đang muốn viết chức năng upload tập tin và hiển thị thanh progress bar trong quá trình tải lên thì bài viết này sẽ giúp ích cho bạn. Đoạn code Javascript bên dưới chỉ dùng để tham khảo, bạn cần chỉnh sửa lại và bổ sung thêm code PHP (hoặc ngôn ngữ khác) để xử lý quá trình upload.

jQuery(document).ready(function ($) {
    (function () {
        var inputFile = $("#IDInputFile");

        var Upload = function (file) {
            this.file = file;
        };

        Upload.prototype.getType = function () {
            return this.file.type;
        };

        Upload.prototype.getSize = function () {
            return this.file.size;
        };

        Upload.prototype.getName = function () {
            return this.file.name;
        };

        Upload.prototype.doUpload = function () {
            var that = this;
            var formData = new FormData();

            formData.append("file", this.file);
            formData.append("upload_file", true);
            formData.append("accept", inputFile.attr("accept"));

            $.ajax({
                type: "POST",
                url: localizedObject.ajaxUrl + "?action=wordpress_ajax_action",
                xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();

                    if (myXhr.upload) {
                        myXhr.upload.addEventListener("progress", that.progressHandling, false);
                    }

                    return myXhr;
                },
                success: function (response) {
                    console.log(response);
                },
                error: function (error) {
                    console.log(error);
                },
                async: true,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                timeout: 60000
            });
        };

        Upload.prototype.progressHandling = function (event) {
            var percent = 0;
            var position = event.loaded || event.position;
            var total = event.total;

            if (event.lengthComputable) {
                percent = Math.ceil(position / total * 100);
            }

            console.log(percent);
        };

        inputFile.on("change", function () {
            if (this.files && this.files.length) {
                var files = this.files,
                    i = 0,
                    count = files.length;

                for (i; i < count; i++) {
                    var file = files[i];

                    var upload = new Upload(file);

                    upload.doUpload();
                }
            }
        });
    })();
});

Nếu bạn sử dụng WordPress thì sử dụng hàm wp_upload_bits để upload tập tin nhé. Để chuyển đổi các biến PHP thành Javascript thì bạn dùng hàm wp_localize_script. Nếu viết mã Javascript trực tiếp trong file .php luôn thì bạn có thể xuất biến trực tiếp.