时间戳

首页 > 解决方案 > 如何在 jquery.fileupload 中强制执行文件大小限制

javascript - 如何在 jquery.fileupload 中强制执行文件大小限制

问题描述

我正在使用 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) 进行测试，但我想要一个适用于任何现代浏览器的解决方案。

标签： javascriptjquery

解决方案

元素上存在的文件对象有一个 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 )

希望这能回答你的问题。祝你好运！

推荐阅读