Question

我正在尝试为文件上传实现ajax样式提交表单。

我成功地更新了进度条。我的意思是整个逻辑工作正常。

但后来我看了Facebook。我找到了 -

1）Facebook允许多种图像选择。 - ＆GT;我能够这样做

2）选择所有图像后。他们开始同时上传，用户可以看到每次上传的个人进度。

分析： 在我提交的情况下，我提交了用户一次选择的所有图像，因此我获得完整提交的进度条而不是单个文件提交。

我的查询是：我们如何在所有选定的图片上实现并行上传，并在所有图片上取得个别进展。

Answer 1

要同时上传多个文件，我将按照以下步骤进行操作 -

首先我提交表单时，根据所选文件的数量，我将通过javascript动态创建不同数量的独立ajax请求（Jquery将为此提供帮助）。
在上传文件时，我可以通过javascript和一个服务器脚本监控剩余的数据上传量，这样我就可以显示每个上传文件的进度条。
接下来在服务器端，我不需要担心，因为php脚本会写一个将单独收集所有请求的内容。

如何监控上传进度

在小文件中，您可能无法获得确切的进度详情，因为它将上传非常快，但在大文件中，您可以监控。

您需要做的是创建一个单独的PHP文件，通过会话变量$_SESSION生成上传％文件的信息，当文件开始上传时，会为其创建一个会话以及多少存储的数据（以字节为单位）以及密钥bytes_processed和content_length中的文件大小（以字节为单位）。我将通过发送另一个请求通过javascript处理该信息。并且该请求将针对通过绑定上传的每个文件进行，并且在有限的时间（可能是1秒）之后，我将再次通过setTimeout()发送请求以了解进度，直到该文件为100％已上传。

Answer 2

Facebook使用HTML5 Files API为多个文件上传制作独立的XHR2请求。当它不受支持时，它会尝试使用Flash，当它也不受支持时，它会回退到基本表单提交。

您可以使用此代码获得相同的结果：

function upload(files){

    for(i=0;i<this.files.length;i++){
        window['xhr'+i] = new XMLHttpRequest();
        window['xhr'+i].open("POST", "/ajax/upload", true);
        window['xhr'+i].upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
               var progress = Math.round((evt.loaded / evt.total) * 100);

               //Change the progress bar value 
            }
        })
        window['xhr'+i].addEventListener("load", function () {

               //Upload Complete. Run callback function
               callback(this.responseText);

        }, false);
    var _params = new FormData();
    _params.append('file'+i, this.files[i]);
    window['xhr'+i].send(_params);

   }
}

然后在你体内：

<input type="file" id="files" multiple />

<script>

      document.getElementById('files').addEventListener('change', upload, false);

</script>

Facebook并行图像上传 - 并行事物是如何工作的

2 个答案:

如何监控上传进度