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

Question

我試圖使用彈簧CommonsMultipartResolver限制圖像大小。問題在於上傳時立即拋出「文件大小異常」，但上傳繼續結束（由於在表單上執行POST的性質）。因此，我最終將臨時文件保存在磁盤上，檢查大小，然後向用戶顯示驗證錯誤消息，並最終浪費額外的帶寬/資源。

有什麼辦法通過在達到指定圖像大小時取消表單提交來解決問題？

Answer 1

這隻能通過在客戶端檢查它。您可以使用新的HTML5 File API，它提供a size property，它以字節爲單位返回大小。在HTML4中沒有辦法實現這一點（期望可能會使用一些特定於IE的ActiveX函數）因此，您是否依賴於目標webbrowser是否有效。在FF> = 3.6，Chrome> = 2和Safari> = 4（不，不在IE中，即使不是IE9！）中支持HTML5。在任何情況下，都應該讓服務器端代碼檢查文件大小，不僅僅是作爲不支持它的瀏覽器的回退，而且也適用於最終用戶禁用或攻擊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屬性選擇多個文件。