HTML5文件上传 - 卡在非常大的文件上 - 仅限Firefox

Question

我正在努力让HTML5上传效果良好。到目前为止，我已经正常工作，没有任何问题。我遇到的唯一问题看起来像这样（仅限Firefox浏览器 - Chrome效果很好）：

1. 加载页面
2. 尝试上传一个非常大的文件（超过1GB）
3. 上传需要很长时间才能启动，然后进度全部搞砸了，似乎上传了两次文件

如果在步骤1和2之间我上传了一个较小的文件，那么大文件会正确上传，并有良好的进度指示。

要体验这一点，您只需在以下演示页面上尝试上述步骤：http://exposureroom.biz/upload.aspx。该演示页面来自一个众所周知的HTML5上传示例：http://www.matlus.com/html5-file-upload-with-progress/。我自己没有写它，但它的行为与我的脚本相同，而且可以访问。

这是一个浏览器错误吗？有没有人遇到过这个？

由于

Answer 1

我认为这不是浏览器错误，而是上传程序中的错误。我测试了上传一个1GB和2GB的文件，并立即开始上传，而没有等待。

确保您的测试有效，但我发现了以下意外行为。

案例1：
1.开始上传1G文件
2.上传正常，进度正常 3.在完成上传之前，单击浏览并上传2G文件
4.上传正常，进度搞砸了。显示负速度和东西。

案例2：
1.开始上传2G文件
2.上传正常，进度正常 3.在完成上传之前，单击浏览并上传1G文件
4.上传正常，进度搞砸了。显示负速度和东西。

案例3：
1.开始上传1G文件
2.上传正常，进度正常 3.开始新标签并开始上传2G文件
4.正常上传，进度正常。

看起来你的程序没有处理前两个测试用例，它看起来不像浏览器bug。

在文件开始时禁用上传按钮之前，请尝试找出“取消”上传无效的原因（如果已实施）。在客户端看起来有一些success取消文件上传。

Answer 2

这不是Firefox中的错误，这是程序中的错误。转载@Ray Cheng在Mac 11.0中的行为和Mac上的Chrome 18.0.1025.151。没有在任何一个浏览器中重现OP的问题，但我怀疑它是基于对由于程序中的反馈中断而发生的事情的误解。

Ray的测试显然失败，因为第二个文件的上传没有取消第一个文件的上传，两个上传正在更新相同的进度条并使用一些相同的值（例如上传的最后一个文件的文件大小） ）和一些唯一值（例如，此特定上载的字节已完成）。或类似的东西。我没有深入挖掘代码，但我确实找到了这个（注意这些变量在全局范围内，但是由执行上传的XMLHttpRequest对象生成的事件更新） ：

  var bytesUploaded = 0;
  var bytesTotal = 0;
  var previousBytesLoaded = 0;
  var intervalTimer = 0;

当前系统的一个明显问题是，如果你开始上传一个大文件，然后开始上传一个小文件，你会得到荒谬的反馈，如下图所示，在较小的文件完成上传后，更不用说第一个文件上传失败了。 （注意上传的大小和百分比与上传文件的大小相比。）

首先，我建议在上传过程中禁用“浏览/文件选择”按钮，直到您解决其他问题为止。

Answer 3

我找到了解决问题的方法。要上传大文件，您必须使用文件api slice调用来清除文件并处理请求，您必须使用webworkers以获得更高的计算性能。