file-upload - 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'

每个文件都会触发添加回调。即使我尝试实现自己的解决方案来限制上传文件的数量，我也希望能够知道对“添加”的所有调用何时完成。换句话说，如果我必须实现解决方案，它看起来像

1. 等待每个文件的添加事件。维护一个计数器来计算添加回调中的每个文件
2. 了解所有文件的所有添加事件触发何时完成——如何？？？
3. 查看上传了多少文件，如果超过允许的最大数量，则阻止上传所有文件，并提示从初始选择中选择一部分文件进行上传。

该解决方案纯粹是图像的客户端，图像直接上传到 S3，但我需要防止每次交易超过 3 次上传。使用我当前的实现，没有什么可以阻止用户选择他/她的整个图像文件夹并用大量图像弄乱 S3 存储桶。亚马逊方面将在政策允许的时间内接收尽可能多的上传文件。

摆脱这种困惑的唯一方法似乎是通过我们的服务器路由所有上传，由于可伸缩性/性能问题，我极力避免这种情况。我们是一家非常小的初创公司，目前的扩展能力非常小。我的另一个想法是要求服务器为每个文件上传启用 30 秒的策略，这看起来相当麻烦。

人们尝试/使用过的任何其他有效的想法/替代方案/建议/建议？

Answer 1

来自 https://github.com/blueimp/jQuery-File-Upload/wiki/Options 处的文档.

Note: The maxNumberOfFiles option depends on the getNumberOfFiles option, which is defined by the UI and AngularJS implementations.

您需要专门为 maxNumberOfFiles 添加这两个文件之一。要让其余部分正常工作，您需要 fileupload-validate.js。

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