Question

我插入了来自mdbootstrap的按钮来加载cv和求职信，我隐藏了两个输入字段，并连接了jquery以单击给定的元素，以作用于真正的输入上以打开加载窗口。问题是，如果我使用指令.on('click', ...)，它将进入一个无限的递归周期，而如果我使用.one ("click", ...)，它将仅执行一次，从而阻止所有用户重新打开上传文件（例如：加载错误文件）。
请帮助上面的查询以下是HTML，CSS，JS代码。

<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>  

<!-- Jquery 3.4.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   

<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>

.file-field,
.carica_cv,
.carica_lettera {
  cursor: pointer;
}

input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
}

input[type="file"]#cv {
  background-color: lime;
  left: 63%;
}

input[type="file"]#lettera {
  background-color: red;
  left: 80%;
}

$(document).ready(function () {
   $("#carica_cv").on("click", function () {
      //alert("Curriculum");
      $('#cv').click();
   })

   $(".carica_lettera").one("click", function () {
      alert("Lettera");
      $('#lettera').click();
   })



//Add file name to label(Show file names under the buttons, on the left) 
       $("#lettera").change(function () {
          $("#nome-lettera").text(this.files[0].name);
       });

       $("#cv").change(function () {
          $("#nome-cv").text(this.files[0].name);
       });

    })

显示文件名的代码正确吗？

Answer 1

您可以只使用标签，而无需任何JavaScript代码。

<div class="form-group col-lg-12">
   <div>
      <label for="cv" class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </label>
   </div>
   <div>
      <label for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </label>
   </div>
   <div>
   </div>
</div>

如果您确实想使用JavaScript单击，则需要查看单击的内容。如果是输入，请忽略它。

$(".file-field").on("click", function (e) {
  const isInput = $(e.target).is("input")
  if (!isInput) {
    $(this).find("input").click()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>

如何防止事件进入无限循环？

1 个答案: