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

时间:2018-04-29 00:06:40

标签: javascript jquery

我使用jquery.fileupload()将文件从浏览器上传到Node.js服务器,该服务器使用" multiparty"解析文件。 NPM。我需要对每个文件以及一个请求中上传的所有文件的总大小强制执行大小限制。

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

我想在客户端强制执行限制。我已经在互联网上搜索了解决方案,但它们似乎都没有用。它们可能在过去有效,但不适用于最新版本的Chrome。

我发现通过观察"更改"我可以确定文件太大了。文件输入元素上的事件,如下所示:

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

当此事件触发时,this.files包含一系列选定文件,包括每个文件的名称和大小。所以我可以确定已超过上限,我可以提醒用户。但我不知道如何阻止文件上传。互联网上的各种来源表明我可以通过返回false或操纵this.files来做到这一点。但这似乎都不起作用。

我正在针对最新版本的Chrome(66.0.3359.139)对此进行测试,但我想要一个适用于任何现代浏览器的解决方案。

2 个答案:

答案 0 :(得分:0)

元素上存在的文件对象具有size属性,您可以使用该属性在客户端上进行比较和验证。我在javascript中写了一个例子。我知道你想在JQuery中使用它,但有点已经回答here

无论如何,这就是我想出来的......

{{1}}

(CodePen https://codepen.io/HappinessFactory/pen/yjggbq

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

答案 1 :(得分:0)

谢谢!我确定如果我没有使用jquery.fileupload(),你的答案会有效,但jquery.fileupload()会自动启动上传。因此,没有“添加文件到服务器”逻辑来执行/跳过。

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