variable imageLen is not reseting after input[type file] change

Question

I have this piece of code that are creating me problem....

  "use strict"; $(document).ready(function() { $(".mylbl").click(function() { var imageslen, imagesSize, imagesName; //decleartion variale //Intiallize variables for prevent to upload many time images imageslen = imagesSize = imagesName = 0; $(".inputfile").click(); $(".inputfile").change(function() { imageslen = 0; var uploadedImages = $(".inputfile")[0].files; imageslen = uploadedImages.length; imagesSize = []; imagesName = []; for (var i = 0; i < imageslen; i++) { imagesSize[i] = uploadedImages[i].size; imagesName[i] = uploadedImages[i].name; console.log(imagesSize[i]); console.log(imagesName[i]); } }); }); }); 

 body { margin: 0px; padding: 0px; background-color: #ccc; color: #f4f9c4; width: 100%; height: 100%; } form { box-sizing: border-box; border: 10px solid #fff; width: 250px; height: 300px; margin: auto; padding: 20px; } .mylbl { box-sizing: border-box; text-align: center; display: block; min-width: 80px; height: 50px; background-color: #ff4500; line-height: 300%; border: 5px solid #C33100; border-radius: 10px; cursor: pointer; } .inputfile { display: none; } .btn { width: 200px; height: 70px; background-color: #129EA4; border: none; border: 5px solid #fff; border-radius: 10px; margin: 10px 10px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="myform" method="post" id="myform" enctype="multipart/form-data"> <input type="file" name="album" name="gallry[]" multiple class="inputfile" /> <label for="imgrs" class="mylbl">Please Choose Images..</label> <input id="_d11re" type="button" name="addimagedata" value="Upload" class="_p25ed btn" /> </form> 

Before run this code open console of browser.. to check problem and upload more than 3 o four time images

The problem is in js code that the variable imageslen isnt reset.. when first time i upload image, the code works correct and when i click second time on that labal("please choose image") for upload image image upload but two time.. here i show u small image of my google chrome..

Answer 1

everytime mylbl gets clicked, a new Change EventListener gets bound to inputfile .

$(".mylbl").click(function() {
    $(".inputfile").click();
    // move the rest of the function from HERE
}
// to HERE

if you have any problems more, make a jsFiddle or something else to show us your intermediate result.