xhr2 文件上传 - 使用 formData 访问文件名

Question

我的应用程序有一个上传组件，它成功地使用了 iFrame 中的旧表单上传方法。我有一个 Ajax 投票，每 1000 毫秒返回一次上传进度。

我正在进行功能检测并允许有能力的浏览器通过 xhr2 上传。理论上，我可以访问客户端的进度；无需轮询，进度条更新更流畅优雅！在批量上传结束时，我需要重定向到一个显示所有上传文件列表的页面。

您可以通过 xhr2 两种方式上传文件：每个文件都是自己上传的，或者您制作一个包含所有文件的“formData”对象。每个都有优点和缺点，我想我正在尝试两全其美，这可能是不可能的。对我来说，“两全其美”将满足这些要求：

1. 能够随时显示各个文件的进度和文件名
2. 能够在发送包时显示“总进度”栏
3. 在服务器端捕获文件“包”，并在整个包完成后发回重定向。

这是单文件传输的示例代码。我可以轻松满足标准#1，并且可以通过一些努力为标准#2 编写代码。 #3 有点问题，因为客户端只是将一堆单独的文件作为单独的传输发送。

function uploadFile(file) {
      xhr = new XMLHttpRequest();

      xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
          //domNode.bar is a cached jQuery object
          domNode.bar.css('width', (evt.loaded / evt.total) * 100 + "%");
          console.log('my current filename is: ' + file.name;
        }
        else {
          // No data to calculate on
        }
      }, false);

      xhr.addEventListener("load", function() {
        console.log("finished upload");
      }, false);

      xhr.open("post", remoteURL, true);

      // Set appropriate headers
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.setRequestHeader("X-File-Name", file.name);
      xhr.setRequestHeader("X-File-Size", file.size);
      xhr.setRequestHeader("X-File-Type", file.type);


      // Send the file
      xhr.send(file);
    }
}

这里是作为 formData 发送的示例代码。我现在根本无法满足标准#1……。我可以很容易地满足标准 #2 和 #3：

function uploadFile(form) {
      xhr = new XMLHttpRequest();

      xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
          console.log(evt);
          domNode.bar.css('width', (evt.loaded / evt.total) * 100 + "%");
          // no longer have access to the file object
        }
        else {
          // No data to calculate on
        }
      }, false);

      xhr.addEventListener("load", function() {
        console.log(xhr);
      }, false);

      xhr.open("post", remoteURL, true);

      // Set appropriate headers
      xhr.setRequestHeader("Content-Type", "multipart/form-data");

      // Send the form
      xhr.send(form);
    }
}

// just assume that I've used formData.append to build a valid form object, 
// which I have; and that this is triggered by a click event or something
uploadFile(form);

我并非完全没有选择，但在继续实施之前，我只是想彻底检查一下我没有遗漏任何东西。以下是我看到的选项：

1. 继续仅使用 Ajax 调用来取得进展。不太流畅，这与我们的设计目标背道而驰，但好处是我不需要使用 iFrame 进行上传，因为我有 xhr2 API。当流关闭时，我也会获得单一重定向。

2. 遍历文件并在客户端做一些繁重的工作以取得进展；除了单个文件进度条，我还可以创建一个算法来跟踪总进度。同时，我向服务器发送一个文件计数，并使用这个计数来推迟重定向 URL，直到最后一个文件到达，然后我才能发送它。

有什么想法吗？

Answer 1

如果您想在一个请求中发送所有文件，FormData 是您唯一的选择。任一选项都允许您涵盖第 1 点和第 2 点。

既然您询问了其他 API，我觉得有必要提及我维护的跨浏览器上传工具：Fine Uploader。我的库提供回调，让您轻松实现目标#1 和#2。就#3 而言，Fine Uploader 在单独的请求中发送每个文件。但是，使用 Fine Uploader 的 API 呈现“总进度”栏并不难。我已经在一个使用 Fine Uploader 的项目中做到了这一点。鉴于您指定的要点，该库提供了一堆回调并公开了一个对您应该有用的综合 API。

请注意，上传进度目前在 IE9 和更早版本的 Fine Uploader 中不可用，但您应该能够使用您的方法通过 ajax 调用显示进度。您的方法是一种可能的方法，但还有另一种可能的选项，计划在未来进一步审查：使用 Apache/nginx 的 UploadProgress 模块。请参阅功能请求#506。