javascript - 带上传功能的 AJAX 进度条

Question

我有一个上传表单，它使用 AJAX 将数据传递到 PHP 处理文件来处理上传等。我试图在上传文件时向表单添加进度条。

我尝试了一些通过搜索找到的代码片段，但它们似乎不起作用。已尝试以下多种变体:

$.ajax({
xhr: function () {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
                if (percentComplete === 1) {
                    $('.progress').addClass('hide');
                }
            }
        }
    }, false);

    xhr.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            $('.progress').css({
                width: percentComplete * 100 + '%'
            });
        }
    }, false);

    return xhr;
},
    url: "upload.php",
    type: 'POST',
    data: formData,
    success: function (data) {
        //success
    }
});

它们似乎都不起作用，我已经尝试提醒 percentComplete 变量，它始终是 100，任何帮助将不胜感激，谢谢。

Answer 1

我希望这有帮助 -

HTML -

<form id="data" method="post" enctype="multipart/form-data">
  <input name="up_vid" type="file" id="up_vid"/>
  <br><br>
  <button id="uploadBtn">Begin Upload</button>
</form>

<br><br>
<div id="status">PROGRESS HERE</div>

JS

$(document).ready(function() {
    $("#uploadBtn").click(function() {
        var formData = new FormData($('#data')[0]);
        console.log(formData);
        $.ajax({
            url: "/echo/html/",
            type: 'POST',
            data: formData,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('#status').html('<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% </b>');
                    }
                }, false);
                return xhr;
            },
            success: function(data) {
                $("#status").html('UPLOADED!!');
            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });
});

现场演示 - https://jsfiddle.net/im4aLL/n7hwfoxd/4/