当上传文件大小超过限制时，如何取消表单提交？

Question

我试图使用Spring的CommonsMultipartResolver来限制图片大小。问题在于，即使上传仍在进行（由于在表单上执行POST的特性），也会立即抛出“文件大小异常”。因此，我最终会将临时文件保存到磁盘上，检查大小，然后向用户显示验证错误消息，除此之外还会浪费额外的带宽/资源。

是否有任何方法通过在达到指定的图像大小时取消表单提交来解决这个问题？

- dmn

Answer 1

这只能通过在客户端进行检查来实现。您可以使用新的HTML5 File API来完成，该API提供了一个size属性，返回文件大小（以字节为单位）。在HTML4中无法实现此功能（除了可能一些IE特定的ActiveX函数）。因此，它取决于目标Web浏览器是否支持。HTML5在FF >= 3.6、Chrome >= 2和Safari >= 4中得到支持（不支持IE，甚至不支持IE9！）。您应该始终保留服务器端代码来检查文件大小，不仅作为不支持它的浏览器的后备，而且还要针对最终用户禁用或黑客JS代码的情况。

这是一个启动示例：

<input type="file" onchange="checkSize(this)" />

使用

function checkSize(input) {
    if (input.files && input.files[0].size > (10 * 1024)) {
        alert("File too large. Max 10KB allowed.");
        input.value = null;
    }
}

是的，input.files 是一个数组。自 HTML5 以来，<input type="file"> 允许通过 multiple 属性选择多个文件。

- BalusC