輸入[類型文件]更改后，變量imageLen沒有重置

Question

我有這段代碼正在造成我的問題...。

  "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> 

在運行此代碼之前，請打開瀏覽器的控制台..以檢查問題並上傳3個或4個以上的時間圖像

問題出在js代碼中，變量imageslen沒有重置。.當我第一次上傳圖像時，代碼工作正確，當我第二次單擊該labal（“請選擇圖像”）以上傳圖像圖像時，卻兩次。在這里，我向您展示我的Google chrome的小圖。

Answer 1

每次單擊mylbl都會將一個新的Change EventListener綁定到inputfile 。

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

如果您還有其他問題，請編寫jsFiddle或其他內容以向我們展示您的中間結果。