How to check width and height from all images has been called by jquery?

Question

i have a problem on jquery image, which i need validate all image has been clicked or show with jquery

here is my code, how i add new images and show the images

<script>
true_image = false;
var _URL = window.URL || window.webkitURL;
$(document).ready(function(){

    var abc = 0;
    var wrapper         = $(".images");
    var add_button      = $("#add_more");

    var x = 1;
    $(add_button).click(function(){

        x++;
            $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
    });

    $(wrapper).on("click",".remove_field", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });



    $('body').on('change', '#file_input', function() {
        var image ;
        if (this.files && this.files[0]) {
            image = new Image;
            image.onload =function() {
                console.log("width : "+this.width+" height: "+this.height);
                if(this.width < 700 || this.height < 650){
                    alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel");
                    $("#submit").prop("disabled",true);
                }else{
                    $("#submit").prop("disabled",false);
                }
            };
            image.src = _URL.createObjectURL(this.files[0]);
            if(true_image == true){
                abc += 1;
                var z = abc - 1;
                var x = $(this).parent().find('#previewimg' + z).remove();
                $(this).after("<div id='abcd" + abc + "' class='abcd'></div><img class='images_view'  width='300' height='200' id='previewimg" + abc + "' src=''/>");
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
                $(this).hide();
                $("#abcd" + abc).append($("<img/>", {
                    id: 'img',
                    src: '<?=base_url('asset/images/BG/close.png')?>',
                    alt: 'delete'
                }).click(function() {
                    $(this).parent().parent().remove();

                    if(($('#file_input').val()) == undefined){
                        $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
                    }
                }));
            }

        }

    });

    function imageIsLoaded(e) {

        $('#previewimg' + abc).attr('src', e.target.result);


        $('.remove_field').hide();
    };

    $('body').on('click', '.images_view', function() {
        abc += 1;
        var cover = false;
        var image_id = this.id;
        $('.images_view').filter(function( index ) {
            if($( this ).attr( "id" ) === image_id){
                $(this).parent().find('#file_input').attr('name','cover');
                $(this).parent().find('#cover').remove();
                $(this).parent().append("<span class='cover' id='cover'>Cover</span>");
            }else{
                $(this).parent().find('#file_input').attr('name','file[]');
                $(this).parent().find('#cover').remove();

            }
        })

    });
});
</script>

from the above code, i trying to upload multi images so i add a button, and after it was clicked a new <input id="file_input" class="images_file" type="file" name="file[]"/> will be added, than after an images has been selected it could show the images. i want trying to validate the file is an image file, width and height on the image

my problem are, if i selected the false image (not in criteria) the button will be disabled but if in the next select, i choose the true image the button back to normal. I know this will happen because i don't check the old images that has been selected before, and that is my problem i don't know how to check it.

guys can you help me how to solve the problem?

Answer 1

First of all I want to say sorry, for my code is not clear.

I got the answer for my problem and some code will be changed, and new code will be added

I used JavaScript localStorage to save the the images data so, I could check the last images that has been loaded.

here is how i checked my images with localStorage

    function check_image() {
        var images_log = JSON.parse(localStorage.getItem("images"));
        var type_reg = /^image\/(jpg|png|jpeg)$/;
        if(images_log != ""){
            for(var i=0;i<images_log.length;i++) {
                if(images_log[i]['type'] != undefined){
                    if(!type_reg.test(images_log[i]['type'])){
                        $("#submit").prop("disabled", true);
                        break;
                    }else{
                        $("#submit").prop("disabled", false);
                    }
                }
                if (images_log[i]['width'] < 700 && images_log[i]['height'] < 650) {
                    $("#submit").prop("disabled", true);
                    break;
                }else{
                    $("#submit").prop("disabled", false);
                }
            }
        }else{
            $("#submit").prop("disabled", false);
        }
    }

For the all code i write in question i will explain it part by part.

<script>
    var _URL = window.URL || window.webkitURL;
    $(document).ready(function(){
        localStorage.clear();

        var abc = 0;
        var wrapper = $(".images");
        var add_button = $("#add_more");

        var x = 1;
        $(add_button).click(function(){
            x++;
            $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field" id="remove_image'+x+'"></img><div>');
        }); //added a new input file and delete button

        $(wrapper).on("click",".remove_field", function(e){
            e.preventDefault(); $(this).parent('div').remove(); x--;
            if(($('#file_input').val()) == undefined){
                $(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><div>');
            }
        }); //if the delete button clicked, it will remove the input and the delete button

From that part I made a simple button for new input file, which when it clicked a new <input type="file"> will be added, and there is a new button to remove the <input type="file">.

This Part is how the images will be call to be loaded, and add new div for the images.

    $('body').on('change', '#file_input', function() {
        var image = new Image ;
        if (this.files && this.files[0]) {

            //i add new var to check the file type
            var type = this.files[0].type; // received the type of the file;
            var type_reg = /^image\/(jpg|png|jpeg)$/; //for validate the file type


            abc += 1; 
            //this var already loaded in top of script which for sign the image delete button id, and the images id

            $(this).after("<div id='delete_image" + abc + "' class='delete_image'></div><img class='images_view'  width='300' height='200' id='previewimg" + abc + "' src=''/>"); 
            //add a new div class for the images.

            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
            $(this).hide();
            // for showing the images by call imageIsLoaded function, and hide the <input type="file">

And this part is for deleting the images, if the delete_image id is clicked it will remove the images and <input type="file"> than remove the images_id from the localStorage;

            $("#delete_image" + abc).append($("<img/>", {
                id: 'img',
                src: '<?=base_url('asset/images/BG/close.png')?>',
                alt: 'delete'
            }).click(function() {
                var preview_id = $(this).parent().parent().find('.images_view').attr('id');
                var images_log = JSON.parse(localStorage.getItem("images"));
                if(images_log != "null" || images_log != null || images_log.length != 0){
                    for (i=0;i<images_log.length;i++){
                        if(preview_id == images_log[i]['id']){
                            images_log.splice(i,1)
                        }

                    }
                }
                localStorage["images"] = JSON.stringify(images_log);
                $(this).parent().parent().remove();

                if(($('#file_input').val()) == undefined){
                    $(wrapper).append('<div class="col-md-4"><input id="file_input"  class="images_file" type="file" name="file[]"/><div>');
                }
                check_image();
            }));

Here is for the validation.

      //here i changed my code how i disabled the button from on this to call a check_image() function and start using localStorage 

      if (type_reg.test(type)) { //check the file is an images file with jpg, png and jpeg

          image.onload = function() {

              //get the last localstorage and added it if a new images

              var images_arr = localStorage.getItem("images");
              var obj = [];
              if(images_arr){
                  obj= JSON.parse(images_arr);
              }
              obj.push({"id":  "previewimg" + abc,  'width' : this.width,'height' : this.height});
              localStorage.setItem("images",JSON.stringify(obj));

              //checked the image height and width showing the alert, and call the check_image() function

              if(this.width < 700 && this.height < 650){
                   alert("The image width is " +this.width + " and image height is " + this.height +", minimum image width is 700 pixel and height is 650 pixel, Please use another image!");

                   check_image();
              }else{
                  check_image();
              }
          };
      } else {
          alert('This file type is unsupported.');
          var images_arr = localStorage.getItem("images");
          var obj = [];
          if(images_arr){
              obj= JSON.parse(images_arr);
          }
          obj.push({"id":  "previewimg" + abc,  'type' : this.files[0].type});
          localStorage.setItem("images",JSON.stringify(obj));
          check_image();
      }


            image.src = _URL.createObjectURL(this.files[0]);
        }

    }); //end for ('body').on('change', '#file_input', function()

For load the images :

    function imageIsLoaded(e) {
        $('#previewimg' + abc).attr('src', e.target.result).parent().find('.remove_field').remove();
    }

That's all how I upload multiple images, showing the images before uploaded and validation the file.

I'm sorry, if this code is too long because I feel sorry at first time I don't write the code too clear, So here I explain how my code worked

Answer 2

there are so many bugs going on around here :)

first of all;

var add_button      = $("#add_more");

var x = 1;
$(add_button).click(function(){ 

you should do this instead (add_button is assigned already as jQuery object):

add_button.click(function(){ 

when you click add_button you insert many file inputs with the same id:

$(wrapper).append('<div class="col-md-4"><input id="file_input" class="images_file" type="file" name="file[]"/><img src="<?=base_url('/asset/images/BG/close.png')?>" class="remove_field"></img><div>');

and you are calling many inputs by assigning here:

$('body').on('change', '#file_input', function() {

so it will trigger more than once for the same ids. and also it won't work as properly if multiple files selected in a single input because you only check the first one here:

if (this.files && this.files[0]) {

as mentioned in comments, you should break down this code and in my suggestion you should write it from scratch..