Total count of Previously and current selected images in multiple image upload in php

Question

I am creating form , in which i want user upload its multiple images through upload button. My issue is, Suppose user select 2 images at first time ,now he want to add 3 more images when its again upload 3 images it shows image count 3 .I want that the image count should be 5 (Total images at first time upload and second time upload). How will it work.

My code is:

    <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

You have got some minor mistakes in your code, but it works properly, the co variable has the proper value.

Here is working example

 $('#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">