Question

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

我想要的答案不是某个第三方图书馆的链接，我想学习并自己制作。

Answer 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%

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

1 个答案: