Jquery文件上传-如何限制上传的文件数量

Question

我正在尝试使用blueimp的Jquery文件上传。文档说我应该能够通过maxNumberOfFiles设置限制要上传的文件数量。

然而，在我的情况下，这似乎不起作用。其他类似acceptFileTypes、loadImageMaxFileSize等也似乎不起作用（可能我必须包含其他js文件？-实际上并不知道是哪些或如何连接它们，经过很多研究仍不能解决）。我正在使用插件的基本版本。下面是我的代码:

包含的JS文件:

1. jquery_ui_widget.js
2. jquery_iframe_transport.js
3. jquery_file_upload.js
4. tmpl.js

JS代码:

$('#fileupload').fileupload
  maxFileSize: 3 * 1024
  minFileSize: 1
  maxNumberOfFiles: maxFilesAllowed
  autoUpload: false
  loadImageMaxFileSize: 3 * 1024
  acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
  add: (e, data) =>
    console.log 'add callback triggered'

add回调函数会为每个文件都触发。即使我试图实现自己的解决方案来限制上传文件的数量，我仍然希望能够知道所有“add”调用何时完成。换句话说，如果我必须实现这个解决方案，它看起来将是：

1. 等待每个文件的add事件。在add回调函数中维护一个计数器以计算每个文件
2. 如何知道全部文件的add事件触发已经完成？
3. 查看上传的文件数量，并防止上传的所有文件超过所允许的最大数量，并提示从初始选择的文件集合中选择一些文件进行上传。

该解决方案完全基于客户端用于图像上传到S3，但我需要防止每次交易上传超过3个文件。使用当前的实现方式，用户可以选择整个图像文件夹并上传大量的图片到S3存储桶中。亚马逊则将在政策允许的时间内接收尽可能多的上传文件。

唯一的解决办法似乎是将所有上传路由通过我们的服务器，但这会因可扩展性/性能问题而被迫避免。我们是一个非常小的初创公司，在这个时候几乎没有扩展能力。我想到的另一个想法是为每个文件上传请求向服务器申请一个30秒启用的策略，但这似乎相当麻烦。

还有其他想法/替代方案/建议/推荐已经尝试/使用过并奏效的吗？

- sat

Answer 1

从https://github.com/blueimp/jQuery-File-Upload/wiki/Options的文档中可以看到：

注意：maxNumberOfFiles选项取决于由UI和AngularJS实现定义的getNumberOfFiles选项。

您需要包含其中之一以特别设置maxNumberOfFiles。为使其余部分正常工作，您需要fileupload-validate.js文件。

您可能还需要更多内容。我建议包括所有可选的js文件，然后删除不必要的文件。

- OmegaJasam

Answer 2

我认为你需要对用户进行身份验证（Facebook、Google、Amazon），在你的存储桶中为每个用户分配一个子文件夹，并查询用户已经在他们的文件夹中拥有多少文件，然后再决定是否允许上传更多文件。

- user846969