複数のファイル入力を使用するときに選択される最大ファイルを制限する方法

Question

<input type="file" multiple>を使用する場合、ユーザーは複数のファイルを選択できます。

例えば2つなど、選択できるファイルの数に制限を設定する方法は？

Answer 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/

ただし、クライアント側の検証は非常に簡単にバイパスできるため、サーバー側でも確認することを忘れないでください。

Answer 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" >

Answer 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);
    }
  });
});

Answer 4

また、ライブラリを使用してそれを行うことを検討する必要があります。それらは制限などを可能にします。

• FineUploader 。 デモ 5.16.2以降のvalidation.itemLimitの使用：

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

• bluimpのjQueryファイルアップロードプラグイン 。使用法： ファイル数を制限するjqueryファイルのアップロード v9.22.0の時点でmaxNumberOfFilesを使用：

  $('#fileuploadbasic').fileupload({
    maxNumberOfFiles: 6
  });
  

これらは https://cdnjs.com/ でも入手できます。