javascript - 当用户进行文件更改时，FileAPI 不会更新文件大小(非 webkit 浏览器)

Question

我想我会先用一个例子来证明这个问题，

jsfiddle:http://jsfiddle.net/e2UfM/15/
(使用 FF 12 和 Chrome 18.0.1025.168 测试)

用法:

从本地计算机加载文本文件。

点击“加载文件”。

点击“显示文件大小” - 注意大小。

修改并将文本文件保存在本地计算机上。

再次点击“显示文件大小”。请注意在 webkit 浏览器 (Chrome) 中文件大小如何变化，但在 Firefox 中它没有更新文件大小

当用户更改他们选择的本地文件时，非 webkit 浏览器不会更新它们的大小属性，而 Chrome 则这样做。两个浏览器都会更新文件的内容。

有没有办法让 Firefox 更新文件大小，类似于 Chrome 在这种情况下的做法？

简单的真实世界示例:

用户选择了一个对于表单来说太大的文件，他们点击提交按钮并收到通知他们的文件太大(通过警报、“大小”栏(见下文)等)

他们在本地修改文件，然后再次点击提交。

在 Chrome 中，文件大小会更新。当用户再次点击提交按钮时，它将再次验证其更新的大小并允许上传。在 Firefox 中，用户必须重新选择表单上的文件，然后才能看到文件大小的变化。

Firefox 的部分解决方法 - @ZER0 的 answer

现实世界的例子(深入):

如果我没记错的话，文件 API 的一个目的是在上传到服务器之前验证客户端的文件大小。

考虑表单中的上传限制为 2MB 并且用户选择 1MB 文件的场景。 Firefox 和 Chrome 都会看到文件大小小于 2MB 并将其添加到表单中。我们也假设有一个整洁的栏，显示他们选择的文件有多大，以及它是否满足文件大小限制:



但随后用户决定在本地对该文件的内容进行细微更改 之前 他们提交表单并将大小增加到 2MB 以上。

在谷歌浏览器中，我可以在客户端优雅地处理这个问题。当用户提交表单时，我可以再次检查文件大小，并在将其发送到服务器之前验证它实际上仍然小于 1MB。但即使在用户提交表单之前，在 Chrome 中，我也可以动态更新小条形图像，因为它们在本地进行更改:



如果用户正在填写大型表单，则此“栏”(或任何其他即时通知表单，例如警报)非常有用。我希望用户在他们的文件太大时立即知道，以便他们可以更正它，而不仅仅是在他们提交表单时。

在 Firefox 中，因为文件大小永远不会更新，它会很乐意上传 2MB 的文件，认为它仍然是 1MB!我使用服务器端逻辑来仔细检查文件大小，但我宁愿节省一次服务器行程。

我是如何遇到错误的:

上面的例子适用于更多的人，因为更多的人可能已经处理过表单上传文件而不是使用 slice function in the File API .这就是我遇到这个问题的具体方式。

在我的表单中，用户选择一个文件，当他们点击提交时，只有最后 10,000 个字节显示在屏幕上 textarea确认这确实是他们想要的文件。

考虑一个大小为 50,000 的文件字节。用户在表单中选择它，Chrome 和 Firefox 都显示字节 40,000 - 50,000在 textarea .

现在用户向文件中添加了一些内容，并将相同的文件撞到 70,000字节!

Google Chrome 将正确更新 textarea包含字节 60,000-70,000 .在 Firefox 中，由于大小将保持不变，因此它仍将仅显示 40,000-50,000 范围内的字节。 .

编辑:更新了 jsfiddle 以证明 FF 仍然可以读取更新后的文件内容。只是文件大小不会随着这些新内容而改变。

编辑: https://bugzilla.mozilla.org/show_bug.cgi?id=756503 (错误报告)

编辑:已添加和更新示例以响应@Eduárd Moldován 的 comment & @ZER0 answer .谢谢!

Answer 1

看来你得到了 size属性直接来自 ，并且由于此表单元素中的值未更改，因此 Firefox 可能不会更新 size属性(property)也是如此。

作为解决方法，您可以查看 length您已阅读的内容。所以，而不是 file.size有 evt.target.result.length .

然而，这对我来说绝对是一个错误，所以你在 Bugzilla 上添加它做得很好!

更新 :
您仍然可以使用 slice 的字符串版本.否则，如果您愿意(或 result 是特定类型的数据)，您可以从 evt.target.result 创建新 Blob对象(文件对象使用此接口(interface))，您可以在其中使用 size属性(property)和slice方法。