17

大家好，我有这个代码：

function test()
{
    req = new XMLHttpRequest();
    req.upload.addEventListener("progress", updateProgress, false);
    req.addEventListener("readystatechange", updateProgress, false);
    req.addEventListener("error", uploadFailed, false);
    req.addEventListener("abort", uploadCanceled, false);

    var data = generateRandomData(currentPayloadId);
    totalSize = data.length;

    req.open("POST", "www.mydomain.com/upload.aspx");
    start = (new Date()).getTime();
    req.send(data);
}

function updateProgress(evt)
{
    if (evt.lengthComputable) {
        total = totalSize = evt.total;
        loaded = evt.loaded;
    }
    else {
        total = loaded = totalSize;
    }
}

此外，我的服务器使用 200 和 Access-Control-Allow-Origin: * 响应对 upload.aspx 的初始 OPTIONS 请求，然后发生第二个请求 POST

一切似乎都已到位，并且在 FireFox 上运行良好，但在 G Chrome 上，updateProgress 处理程序没有被调用，但只有一次，然后 lengthComputable 为 false。

我需要 Access-Control-Allow-Origin: * 因为这是一个跨域调用，脚本父级是不同服务器上的资源，然后是 upload.aspx 域

任何人都可以给我一些线索，提示，请帮助？这是 G Chrome 的已知问题吗？

谢谢！卵子

4

5 回答 5

4

我想我有一个解决你的问题的方法
我不知道这个函数“generateRandomData()”的背后是什么

var data = generateRandomData(currentPayloadId)

当我变成这个时它正在工作：

var data = new FormData();
data.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

小解释：您需要手动将文件输入表单附加到表单数据中，fileToUpload在<input type="file" name="fileToUpload" id="fileToUpload" />
您的updateProgress函数中，IF您可以添加类似这样的内容来跟踪进度console.log(evt.total +" - "+ evt.loaded)
在此处输入图像描述

这适用于谷歌 Chrome 浏览器。我已经在新的浏览器版本 57 中进行了测试，
我在 4 年前为自己制作了一个上传进度表，这意味着这段代码也可以在旧浏览器版本中运行。

整个代码片段将如下所示

function test()
{
    req = new XMLHttpRequest();
    req.upload.addEventListener("progress", updateProgress, false);
    req.addEventListener("readystatechange", updateProgress, false);
    req.addEventListener("error", uploadFailed, false);
    req.addEventListener("abort", uploadCanceled, false);

    //var data = generateRandomData(currentPayloadId);
    var data = new FormData();
    data.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
    totalSize = data.length;

    req.open("POST", "www.mydomain.com/upload.aspx");
    start = (new Date()).getTime();
    req.send(data);
}

function updateProgress(evt)
{
    if (evt.lengthComputable) {
        total = totalSize = evt.total;
        loaded = evt.loaded;
        console.log(evt.total +" - "+ evt.loaded)
    }
    else {
        total = loaded = totalSize;
    }
}
于 2017-05-03T18:02:53.643 回答
1

当您正在加载的页面不包含

  Content-Length: 12345

在标头中，其中 12345 是响应的长度（以字节为单位）。如果没有长度参数，progress 函数就无法处理。

于 2017-07-06T17:10:18.380 回答
0

首先，确保将"www.example.com"其添加到 中manifest.json，如下所示：

清单.json

 {
   ..
   "permissions": [
     "http://www.example.com/",
     "https://www.example.com/",
   ],
   ..
 }

然后我认为你的例子应该有效。

有关在 google chrome 扩展中使用 xhr 的更多信息，请参阅此处的文档。

如果我上面提供的内容没有，CSP 文档也值得一看。

于 2015-06-10T01:42:17.627 回答
0

这可能只是 XMLHttpRequest.upload 属性的兼容性问题。它返回一个 XMLHttpRequestUpload 对象，但是如果您尝试在 MDN 中找到该对象规范，它不存在，那么我们如何知道哪些浏览器完全支持它。

XMLHttpRequest.upload 兼容性 XMLHttpRequest.upload 属性的兼容性

您是否尝试过直接在 xhr 上收听进度：

req.addEventListener("progress", updateProgress, false);
于 2016-12-30T16:56:38.047 回答
0

我使用 jQuery 来取得这样的进展：

    $.ajax({
        url : furl,
        type : method,
        data : data,
        //...
        },
        xhr : function () {
            //upload Progress
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function (event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //update progressbar
                        $(".progress-bar").css("width",  + percent + "%");
                        $(" .status").text(position + " / " + total + " (" + percent + "%)");
                    }, true);
            }
            return xhr;
        },
于 2017-03-03T10:35:37.727 回答