javascript - 上传 2 个或更多文件时使用 ajax 的进度条

Question

嗨，我正在尝试上传 2 个或更多文件，我的问题是我的进度条会显示 100%，因为首先上传的是小文件，然后又返回到大文件的百分比。我的问题是如何如果我上传很多文件，我能有同样的进度吗？

$('body').on('change', 'input:file.gallery_images', function(event)
{
    event.preventDefault();

    var data = new FormData();
    data.append('id', $("#id").val());

    var count = $(this)[0].files.length;

    $.each($(this)[0].files, function(i, file)
    {
        data.append('userfile', file);

        $.ajax(
        {
            type: "POST",
            url: href+path+"/imagens/store",
            data: data,
            mimeType: 'multipart/form-data',
            contentType: false,
            cache: false,
            processData: false,
            dataType: "json",
            xhr: function()
            {
                var _xhr = $.ajaxSettings.xhr();

                _xhr.addEventListener('progress', function (event) { }, false);

                if (_xhr.upload) 
                {
                    _xhr.upload.onprogress = function(event) 
                    {
                        var percent = 0;
                        if (event.lengthComputable) 
                        {
                            var position = event.position || event.loaded;
                            var total = event.totalSize || event.total;
                            percent = Math.ceil(position / total * 100);
                        }
                        $("#progress-bar").width(percent + '%');

                    };
                }
                return _xhr;
            },
            beforeSend: function()
            {
                $("#progress").fadeIn('slow');
                $("#progress-bar").width('0%');
            },
            success: function(data)
            {
                if(data.gallery)
                {
                    if($(".alert").length > 0) 
                    {
                        $(".alert").hide('slow').remove();
                        $("#droppable").show('slow');
                    }
                    $('.gallery').fadeTo('300', '0.5', function () {
                        $(this).html($(this).html() + data.gallery).fadeTo('300', '1');
                    });
                }
                $("#progress").fadeOut('slow');
            }
        }); 

    });
});

Answer 1

好吧，我注意到的第一件事是您将文件添加到 $.each 内的“data”变量中...但这意味着第一个 POST 包含第一个图像，第二个 POST 包含第一个图像和第二个图像第二，依此类推。我认为你应该将这部分放在你的 $.each 中:

var data = new FormData();
data.append('id', $("#id").val());

好的，所以，要解决您的问题:在发送任何内容之前，请检查它们并总结它们的大小。您还需要单独存储每个文件的进度，因此将其从零开始:

var sumTotal = 0;
var loaded = [];
for (var i = 0, list = $(this)[0].files; i < list.length; i++) {
   sumTotal += list[i].size;
   loaded[i] = 0;
}

在 onprogress 中，您不是将 event.position 与 event.totalSize 进行比较，而是将此位置存储在“已加载”数组中，对所有数组求和，然后将其与 sumTotal 进行比较。

loaded[i] = event.position || event.loaded;
var sumLoaded = 0;
for (var j = 0; j < loaded.length; j++) sumLoaded += loaded[j];
percent = Math.ceil(sumLoaded * 100/sumTotal);

;)