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

Javascript 如何在jquery.fileupload中强制执行文件大小限制,javascript,jquery,Javascript,Jquery,我使用jquery.fileupload()将文件从浏览器上载到Node.js服务器,该服务器使用“多方”npm解析文件。我需要对每个文件以及一个请求中上载的所有文件的总大小实施大小限制 “多党”npm允许我做后者,但不允许做前者。即使对于后者,在浏览器上传足够的数据以达到限制之前,限制也不会强制执行。因此,用户只能等待很长时间才能收到错误消息 我想在客户端强制执行这个限制。我在互联网上搜索过解决方案,但似乎没有一个有效。它们可能在过去工作过,但在最新版本的Chrome上却不起作用 我发现我可以

我使用jquery.fileupload()将文件从浏览器上载到Node.js服务器,该服务器使用“多方”npm解析文件。我需要对每个文件以及一个请求中上载的所有文件的总大小实施大小限制

“多党”npm允许我做后者,但不允许做前者。即使对于后者,在浏览器上传足够的数据以达到限制之前,限制也不会强制执行。因此,用户只能等待很长时间才能收到错误消息

我想在客户端强制执行这个限制。我在互联网上搜索过解决方案,但似乎没有一个有效。它们可能在过去工作过,但在最新版本的Chrome上却不起作用

我发现我可以通过观察文件输入元素上的“更改”事件来确定文件是否太大,如下所示:

$('#file-input-id').on('change', function() {
    console.log(this.files);
});
触发此事件时,this.files包含选定文件的数组,包括每个文件的名称和大小。因此,我可以确定已超过上限,并可以提醒用户。但我不知道如何阻止文件上传。互联网上的各种来源建议我可以通过返回false或操纵this.files来实现这一点。但这一切似乎都不起作用


我正在用最新版本的Chrome(66.0.3359.139)对此进行测试,但我希望有一个能与任何现代浏览器配合使用的解决方案。

元素上存在的文件对象有一个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 "
  }
})
var inputElement=document.getElementById(“文件”)
inputElement.addEventListener('change',function(){
var fileLimit=100;//可以是您想要的任何内容
var files=inputElement.files;
var fileSize=files[0].size;//inputElement.files始终是一个数组
var fileSizeInKB=(fileSize/1024);//这将以KB为单位,默认为字节
if(fileSizeInKB
(代码笔)


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

谢谢!如果我不使用jquery.fileupload(),我相信您的答案会有效,但是jquery.fileupload()会自动启动上载。因此,没有“将文件添加到服务器”逻辑可执行/跳过

但你的回答让我朝着正确的方向前进。对于其他陷入这一困境的人:诀窍是使用传递到jquery.fileupload()的“options”对象的“start”或“submit”属性。这两个都是函数,如果其中一个返回false,则上载将被取消