我们可以在上传多个文件时跟踪单个文件的上传进度吗？

【问题标题】：Can we track individual file upload progress when uploading multiple files?我们可以在上传多个文件时跟踪单个文件的上传进度吗？
【发布时间】：2018-09-26 18:57:04
【问题描述】：

当使用<input type="file" multiple/> 选择多个文件时，是否可以跟踪每个单独文件的上传，而不仅仅是所有文件的总长度，浏览器是否向我们提供了这些信息？是否可以从输入中提取文件对象并为每个文件创建输入并分别上传？我已经尝试过了，但 input.files 数组由于安全原因被锁定，但它们可以让我们能够操作单个文件，而无需更改路径或任何其他属性。

我想要一个不是链接到某个第三方库的答案，我想自己学习和制作。

【问题讨论】：

标签： javascript jquery html ajax xmlhttprequest

【解决方案1】：

基本上，当我处理<input type="file" multiple/> 时，我总是将文件存储在另一个数组中以进行进一步的工作，例如删除特定文件。

var UploadFiles = [];

$('#input').on('change',function(){
    var files = this.files; // get files from input
    UploadFiles = files.slice(0) // storage files in UploadFiles array
})

然后，通过 AJAX单独上传文件

// initialize your progress bar
$.each(UploadFiles,function(){
    let uploadFile = new FormData()
    uploadFile.append('file', this)

    $.ajax({
        // some parameters...
        , beforeSend: function(){
              // some code...
              // setting progress bar percentage as you want
          }
        , success: function(){
              // some code...
              // setting progress bar percentage as you want
          }
    }).done(function(){
        // some code...
        // setting progress bar percentage as you want
    })
})
// setting progress bar to 100%

【讨论】：