输入 [类型文件] 更改后变量 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 o 四次图像

问题出在 js 代码中，变量 imageslen 没有被重置。当我第一次上传图片时，代码工作正常，当我第二次点击 labal("please choose image") 上传图片时上传不过两次.. 在这里我给你看我的 google chrome..

Answer 1

每次 mylbl 被点击时，一个新的 Change EventListener 被绑定到 inputfile。

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

如果您还有更多问题，请制作一个 jsFiddle 或其他工具来向我们展示您的中间结果。

输入 [类型文件] 更改后变量 imageLen 未重置

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

javascript

jquery

html

variables

reset