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.上传正常开始，进度正常。

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

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

Answer 2

这不是 Firefox 中的错误，这是您的程序中的错误。在 Mac 上重现了 @Ray Cheng 在 FF 11.0 和 Chrome 18.0.1025.151 中的行为。没有在任一浏览器中重现 OP 的问题，但我怀疑这是由于程序中的反馈中断导致对正在发生的事情的误解。

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

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

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

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

Answer 3

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