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中的变量...但这意味着第一个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进行比较，而是将此位置存储在已加载的＆＃39;数组，求和所有数组，然后将它与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);

）

上传2个或更多文件时ajax中的进度条

1 个答案: