Вопрос по html, file – Как ограничить максимальное количество файлов, выбранных при использовании нескольких файлов ввода

47

Когда используешь<input type="file" multiple> пользователь может выбрать несколько файлов.

Как установить ограничение на количество файлов, например, два?

Возможный дубликатCount and limit the number of files uploaded (HTML file input) gbjbaanb
Это может быть полезно:stackoverflow.com/questions/9813556/… Yan Berk

Ваш Ответ

6   ответов
2

если количество файлов превышает 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);
    }
  });
});
47

чтобы проверить:

$(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/

Но не забудьте проверить и на стороне сервера, так как проверка на стороне клиента может быть легко обойдена.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
6
<strong>On change of the input track how many files are selected:</strong>

<script>
    $("#image").on("change", function() {
         if($("#image")[0].files.length > 2) {
                   alert("You can select only 2 images");
         } else {
               $("#imageUploadForm").submit();
         }
    });
</script>
<input name="image[]" id="image" type="file"  multiple="multiple" accept="image/jpg, image/jpeg" >
2

ого: они позволяют ограничивать и многое другое:

FineUploader. Demo using validation.itemLimit as of 5.16.2:

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

bluimp's jQuery File Upload Plugin. Usage: jquery file upload restricting number of files using maxNumberOfFiles as of v9.22.0:

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

Они также доступны наhttps://cdnjs.com/

-3

Использовать два<input type=file> элементы вместо, безmultiple приписывать.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

если вы хотите php, вы можете посчитать массив и просто сделать оператор if лайк

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

Похожие вопросы