使用多个文件输入时如何限制选择的最大文件数答案

【问题标题】：How to limit the maximum files chosen when using multiple file input使用多个文件输入时如何限制选择的最大文件数
【发布时间】：2012-04-11 11:56:28
【问题描述】：

使用<input type="file" multiple> 时，用户可以选择多个文件。

如何限制可以选择的文件数量，例如两个？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/9813556/…
Count and limit the number of files uploaded (HTML file input)的可能重复

标签： html file

【解决方案1】：

您可以运行一些 jQuery 客户端验证来检查：

$(function(){
    $("input[type='submit']").click(function(){
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>2){
         alert("You can only upload a maximum of 2 files");
        }
    });    
});

http://jsfiddle.net/Curt/u4NuH/

但请记住也要检查服务器端，因为很容易绕过客户端验证。

【讨论】：

我真的不明白为什么这段代码被标记为正确答案。它确实会检查上传文件的数量，但不会禁用表单提交。 jsfiddle 代码没有定义 action 属性的表单标签，它看起来工作正常，但是如果我们通过添加表单标签来扩展它，它将在警报出现后立即提交表单。
@David 主要是因为人们到处复制和粘贴东西。到现在已经 6 年了。

【解决方案2】：

在改变输入轨道时选择了多少个文件：

$("#image").on("change", function() {
    if ($("#image")[0].files.length > 2) {
        alert("You can select only 2 images");
    } else {
        $("#imageUploadForm").submit();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>On change of the input track how many files are selected:</strong>
<input name="image[]" id="image" type="file"  multiple="multiple" accept="image/jpg, image/jpeg" >

【讨论】：

【解决方案3】：

如果文件数大于 max_file_number，这应该可以工作并保护您的表单不被提交。

$(function() {

  var // Define maximum number of files.
      max_file_number = 3,
      // Define your form id or class or just tag.
      $form = $('form'), 
      // Define your upload field class or id or tag.
      $file_upload = $('#image_upload', $form), 
      // Define your submit class or id or tag.
      $button = $('.submit', $form); 

  // Disable submit button on page ready.
  $button.prop('disabled', 'disabled');

  $file_upload.on('change', function () {
    var number_of_images = $(this)[0].files.length;
    if (number_of_images > max_file_number) {
      alert(`You can upload maximum ${max_file_number} files.`);
      $(this).val('');
      $button.prop('disabled', 'disabled');
    } else {
      $button.prop('disabled', false);
    }
  });
});

【讨论】：

整个问题中唯一有效的简单解决方案。太棒了！

【解决方案4】：

另一种可能的 JS 解决方案

function onSelect(e) {
    if (e.files.length > 5) {
        alert("Only 5 files accepted.");
        e.preventDefault();
    }
}

【讨论】：

在 chrome onselect 上不会触发该方法。 onchange 会触发，但不会阻止默认设置。

【解决方案5】：

您还应该考虑使用库来做到这一点：它们允许限制等等：

FineUploader。从 5.16.2 开始，Demo 使用 validation.itemLimit：

var restrictedUploader = new qq.FineUploader({
    validation: {
        itemLimit: 3,
    }
});

bluimp's jQuery File Upload Plugin。用法：jquery file upload restricting number of files 使用 maxNumberOfFiles 从 v9.22.0 开始：
```
$('#fileuploadbasic').fileupload({
  maxNumberOfFiles: 6
});
```

他们也可以通过https://cdnjs.com/获得

【讨论】：

【解决方案6】：

在javascript中你可以做这样的事情

<input
  ref="fileInput"
  multiple
  type="file"
  style="display: none"
  @change="trySubmitFile"
>

函数可以是这样的。

trySubmitFile(e) {
  if (this.disabled) return;
  const files = e.target.files || e.dataTransfer.files;
  if (files.length > 5) {
    alert('You are only allowed to upload a maximum of 2 files at a time');
  }
  if (!files.length) return;
  for (let i = 0; i < Math.min(files.length, 2); i++) {
    this.fileCallback(files[i]);
  }
}

我也在寻找一种解决方案，可以在选择文件时限制它，但直到现在我找不到类似的东西。

【讨论】：

【解决方案7】：

改用两个<input type=file> 元素，不带multiple 属性。

【讨论】：

这将只允许一张图片，他想要两张图片
不，这允许两个单独的文件列表对象，并且一直被用作上传多个文件和限制文件数量的方法---15 年前
如果要求真的只是“有两个不同的单一输入”，那么这实际上是最好的答案@Diego。可悲的是，这个问题如此不清楚，我们真的不能说。
@me_ 我真的很好奇现在的解决方案是什么。希望你不是在谈论那里的 jQuery 集群。就像七年前一样。
@Félix Gagnon-Grenier 直到 html 5 才存在 multiple 属性...无论使用库还是仅使用普通 javascript，都必须在选择文件后检查文件数。我会说解决方案是告诉用户不超过给定数量的文件，然后在弹出窗口关闭时检查文件类型和数量......如果超过给定数量则拒绝文件对象并重新开始。但是不，这不是最好的解决方案——仅从 ui 的角度来看，它要慢得多……我们现在有了 multiple 属性，使用它。

【解决方案8】：

如果你想要 php，你可以计算数组，然后做一个 if 语句喜欢

if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
      echo "error message";

【讨论】：