如何在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，则取消上传。