ограничение загрузки нескольких файлов не работает с использованием dropzone

Question

У меня есть код, приведенный ниже, он подсчитывает файлы, когда я выбираю файлы и предупреждаю, что вы не можете выбрать больше, чем и т.д. ...

Предел равен 4, и когда я выбираю 6, он говорит, что не может выбрать большечем 4. Но когда я выбираю 4, он добавляет и показывает большой палец снова и снова при выборе одного или 4, он снова добавляет новые 4 или любые другие файлы, так что пользователь может загружать неограниченное количество файлов.

Как я могу поймать эти выбранные файлыи ограничить их.

<div class="m-form__group form-group row">
    <label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">
    Select Image
    </label>
    <div class="col-lg-9 col-md-9 col-sm-12">
        <div class="col-lg-12 col-md-9 col-sm-12" id="thumb-output">
        <input id="files" class="" type="file" name="file[]" multiple>
        </div>
    </div>
</div>

$(document).ready(function() {

$('input[type=file]').on('dragenter', function() {
    $('div').addClass('dragover');
});

$('input[type=file]').on('dragleave', function() {
    $('div').removeClass('dragover');
});

if (window.File && window.FileList && window.FileReader) {
    var numFiles = $('input[type=file]')[0].files.length;

    $("#files").on("change", function(e) {
      var files = e.target.files, filesLength = files.length;

    if(files.length > 4){
        alert("you can select max 4 files.");
    }else{
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    }
    });
        } else {
    alert("Your browser doesn't support to File API")
  }
});

Answer 1

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

var fileAdded = 0;

...

if(fileAdded + files.length > 4){
    alert("you can select max 4 files.");
} else {
    fileAdded = fileAdded + files.length;
    for (var i = 0; i < files.length; i++) {

    ...

    }
}

Также, пожалуйста, не забудьте уменьшить fileAdded, когда пользователь удалит файл.

---

Вот пример:

var fileAdded = 0;

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        var numFiles = $('input[type=file]')[0].files.length;

        $("#files").on("change", function(e) {
            var files = e.target.files, filesLength = files.length;

            if(fileAdded + files.length > 4){
                alert("you can select max 4 files.");
            }else{
                fileAdded = fileAdded + files.length;
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<span class=\"pip\">" +
                          "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                          "<br/><span class=\"remove\">Remove</span>" +
                          "</span>").insertAfter("#files");
                        $(".remove").click(function(){
                            $(this).parent(".pip").remove();
                            fileAdded = fileAdded - 1;
                        });
                    });
                    fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Your browser doesn't support to File API");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="files" class="" type="file" name="file[]" multiple>