Общее количество ранее и текущих выбранных изображений при загрузке нескольких изображений в php

Question

Я создаю форму, в которой я хочу, чтобы пользователь загружал несколько изображений через кнопку загрузки. Моя проблема в том, Предположим, пользователь выбрал 2 изображения в первый раз, теперь он хочет добавить еще 3 изображения когда он снова загружает 3 изображения, он показывает количество изображений 3. Я хочу, чтобы количество изображений было 5 (Общее количество изображений при первой загрузке и второй загрузке). Как это будет работать.

Мой код:

    <input type="file" id="files" name="dog_img[]" class="upload-img" onchange="readURL(this);" multiple>
    <input type="hidden" name="img-count"  id="img-count" value="0">

JQUERY:

$('#files').change(function () {
    var co = 0;
    var len = 5;
    var preimgcount = $("#img-count").val();
    if (preimgcount != 0) {
        console.log('preimgcount - ' + preimgcount);
        co = parseInt(preimgcount);
        len = parseInt(len) - preimgcount;
    }
    for (var i = 0; i < len; i++) {
        var num_of_images =  $("#files")[0].files.length;
        $("#img-count").attr('value' , num_of_images);
        (function (j, self) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var image = new Image();
                image.src = e.target.result;
                image.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    if (height < 700 || width < 1000) {
                        alert("Height and Width must not exceed 1024px.");
                        return false;
                    }
                };
                co++;
                console.log('co - ' + co);
                $('.gallery-row').append('<div class="col-md-2" id="pip"><span id="' + [co] + '" data-id="' + [co] + '" class="click-form"><img class="imageThumb" src="' + e.target.result + '"/>' + '</span><span data-id="' + [co] + '" class="remove">X</span></div>');
            }
            reader.readAsDataURL(self.files[j])
        })(i, this);
    }
});

Answer 1

EDIT

В вашем коде есть небольшие ошибки, но он работает правильно, переменная co имеет правильное значение.

Вот рабочий пример

$('#files').change(function() {
  var co = 0;
  var len = 5;
  var img_count = $("#img-count");
  var preimgcount = img_count.val();
  if (preimgcount != 0) {
    console.log('preimgcount - ' + preimgcount);
    co = parseInt(preimgcount);
    len = parseInt(len) - preimgcount;
  }
  for (var i = 0; i < len; i++) {
    var num_of_images = $("#files")[0].files.length;
    (function(j, self) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
          var height = this.height;
          var width = this.width;
          if (height < 700 || width < 1000) {
            alert("Height and Width must not exceed 1024px.");
            return false;
          }
        };
        co++;
        img_count.val(co);
        console.log('co - ' + co);
        $('.gallery-row').append('<div class="col-md-2" id="pip"><span id="' + [co] + '" data-id="' + [co] + '" class="click-form"><img class="imageThumb" src="' + e.target.result + '"/>' + '</span><span data-id="' + [co] + '" class="remove">X</span></div>');
      }
      reader.readAsDataURL(self.files[j])
    })(i, this);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="files" name="dog_img[]" class="upload-img" onchange="readURL(this);" multiple>
<input type="hidden" name="img-count" id="img-count" value="0">