2

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

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

但后来我看了脸书。我找到 -

1) Facebook 允许多选图片。-> 我可以这样做

2）一旦选择了所有图像。他们同时开始上传，用户可以看到每个上传的单独进度。

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

我的问题是：我们如何才能在所有选定的图像上实现并行上传并在所有图像上取得单独的进展。

4

2 回答 2

1

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

  1. 首先，当提交表单时，根据选择的文件数量，我将通过 javascript 动态创建不同数量的独立 ajax 请求（Jquery 将对此有所帮助）。
  2. 在上传文件时，我可以通过 javascript 和一个服务器脚本监控还有多少数据要上传，基于此我可以显示每个正在上传的文件的进度条。
  3. 接下来在服务器端，我不需要担心，因为 php 脚本将编写什么将分别处理所有请求。

如何监控上传进度

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


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

于 2013-10-18T15:40:18.677 回答
0

Facebook uses the HTML5 Files API to make independent XHR2 requests for multiple file upload. When it is not supported it'll try to use Flash and when that is also not supported it falls back to the basic form submission.

You can achieve the same result with this code:

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);

   }
}

Then in your body:

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

<script>

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

</script>
于 2013-10-19T05:54:15.317 回答