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

Question

我正在尝试使用Spring CommonsMultipartResolver限制图像大小。 问题是上载后会立即引发“文件大小异常”，但是上载会持续到最后（由于在表单上执行POST的性质）。 因此，我最终将临时文件保存在磁盘上，检查大小，然后向用户显示验证错误消息，最重要的是浪费了额外的带宽/资源。

有没有办法通过达到指定图像大小时取消表单提交来解决问题？

Answer 1

这只能通过在客户端进行检查来实现。 您可以使用新的HTML5 File API来做到这一点，该API提供了size属性 ，该属性返回以字节为单位的大小。 在HTML4中无法实现此目的（可能需要某些IE特定的ActiveX函数），因此，您是否依赖于目标Web浏览器是否有效。 FF> = 3.6，Chrome> = 2和Safari> = 4支持HTML5（不，不是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属性选择多个文件。