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

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

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

• ファインアップローダー. 5.16.2 の時点で使用するデモ:validation.itemLimit

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

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

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

https://cdnjs.com/でも入手できます。

Answer 4

<input type=file>代わりに、multiple属性なしで2つの要素を使用してください。