Question

使用jQuery $.ajax()监控Safari 9.1中的XHR文件上传进度（Chrome和Firefox运行正常）时，loaded从文件大小的0和total开始。但是，在某些情况下，上传完成后，total突然加倍，loaded继续递增。这使得进度条从0％变为100％，然后回到50％并以100％结束。

文件正确发送到后端。唯一的问题是进度条，以及文件可能上传了两次（我没有测试过）。

我尝试使用$(e).val(“”)清除输入文件元素，包装表单元素并重置它，然后删除它并创建一个新元素。什么都行不通。

还检查了FormData创建，使用$.ajaxSettings.xhr()恢复XMLHttpRequest，然后使用new XMLHttpRequest()来创建它。什么都没有改变。

还尝试了jQuery 2.2.3（而不是1.11.3）并且行为是一样的。

我已经查找了类似的代码并且找不到任何主要区别，也找不到任何类似的文档错误，除了这一个：Safari xhr drag'n'drop file upload seems to occur twice，其中那个人使用FormData对象解决了问题我已经在使用了。）

这是在文件输入更改时触发的相关上传代码：

function activityUploadImages(o){
    var p, i, f, q, d;
    p = $(o);
    for(i = 0; f = o.files[i]; i++){
        (q = $("<div>")).insertBefore(p)
        .append($("<div>")
            .append($("<span>"))
        );
        d = new FormData();
        d.append("action", "uploadimage");
        d.append("image", f);
        ldAjax(
            "POST",
            "",
            d,
            {
                context: q,
                onProgress: function(p, t, q){
                    q.find("span").animate({
                        "height": p / t * 100 + "%"
                    }, {
                        queue: false,
                        duration: 200
                    });
                }
            }
        );
    }
    p.val("");
}

function ldAjax(type, url, data, options){
    var o;
    o = {
        type: type,
        url: url,
        data: data
    };
    if(options.onProgress)
        o.xhr = function(){
            var x;
            x = $.ajaxSettings.xhr();
            x.upload.onprogress = function(e){
                options.onProgress(e.loaded, e.total, options.context);
            };
            return x;
        }
    if(data instanceof FormData){
        o.contentType = false;
        o.processData = false;
    }
    return $.ajax(o);
}

XHR上传进度从100％回到50％

0 个答案: