上傳文件大小超出限制時，如何取消表單提交？

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屬性選擇多個文件。