如何在jquery.fileupload中實施文件大小限制

Question

我正在使用jquery.fileupload（）將文件從瀏覽器上傳到Node.js服務器，該服務器使用“多方” npm解析文件。 我需要對每個文件以及在一個請求中上傳的所有文件的總大小實施大小限制。

“多方” npm允許我執行后者，但不能執行前者。 甚至對於后者，在瀏覽器上傳足夠的數據以達到限制之前，都不會強制執行該限制。 因此用戶只能等待很長時間才能收到錯誤消息。

我想在客戶端強制執行此限制。 我已經在Internet上搜索了解決方案，但似乎都沒有用。 他們過去可能曾經使用過，但不能使用最新版本的Chrome。

我發現可以通過監視文件輸入元素上的“更改”事件來確定文件太大，如下所示：

$('#file-input-id').on('change', function() {
    console.log(this.files);
});

觸發此事件時，this.files包含選定文件的數組，包括每個文件的名稱和大小。 因此，我可以確定已超過限制，並且可以提醒用戶。 但是我仍然不知道如何阻止文件上傳。 互聯網上的各種資料表明，我可以通過返回false或操縱this.files來實現。 但是這些似乎都不起作用。

我正在針對最新版本的Chrome（66.0.3359.139）對此進行測試，但是我想要一個適用於任何現代瀏覽器的解決方案。

Answer 1

元素上存在的文件對象具有size屬性，可用於比較客戶端並進行驗證。 我用javascript寫了一個例子。 我知道您在JQuery中需要它，但是， 這里已經回答了

無論如何，這就是我想出的...

var inputElement = document.getElementById("file")

inputElement.addEventListener('change', function(){
  var fileLimit = 100; // could be whatever you want 
  var files = inputElement.files;
  var fileSize = files[0].size; //inputElement.files is always an array
  var fileSizeInKB = (fileSize/1024); // this would be in kilobytes defaults to bytes

  if(fileSizeInKB < fileLimit){
   console.log("file go for launch")
    // add file to server here
  } else {
    console.log("file too big")
    // do not pass go, do not add to server. Pass error to user    
    document.getElementById("error").innerHTML = "your file is over 100 KB "
  }
})

（CodePen https://codepen.io/HappinessFactory/pen/yjggbq ）

希望這能回答你的問題。 祝好運！

Answer 2

謝謝！ 我敢肯定，如果我不使用jquery.fileupload（），您的答案就會奏效，但是jquery.fileupload（）會自動開始上傳。 因此，沒有執行/跳過“添加文件到服務器”的邏輯。

但是您的回答使我朝着正確的方向前進。 對於其他陷入困境的人：訣竅是使用傳遞給jquery.fileupload（）的“選項”對象的“開始”或“提交”屬性。 這兩個都是函數，如果其中一個返回false，則取消上傳。