91

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

一个如何设置可以选择多少个文件的限制,例如两个?

4

8 回答 8

79

您可以运行一些 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/

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

于 2012-04-11T12:10:36.037 回答
21

在更改输入轨道时选择了多少个文件:

$("#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" >

于 2014-11-21T08:00:59.967 回答
8

如果文件数大于 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);
    }
  });
});
于 2018-07-04T13:55:30.537 回答
8

JS的另一种可能的解决方案

function onSelect(e) {
    if (e.files.length > 5) {
        alert("Only 5 files accepted.");
        e.preventDefault();
    }
}
于 2019-11-25T17:35:26.930 回答
3

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

它们也可以在https://cdnjs.com/上找到

于 2014-11-08T09:40:44.513 回答
0

在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]);
  }
}

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

于 2021-01-22T19:45:23.860 回答
-4

改为使用两个<input type=file>元素,而不使用multiple属性。

于 2012-04-11T12:59:52.810 回答
-6

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

if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
      echo "error message";
于 2019-03-08T13:29:37.037 回答