如何强制addEventListener提交仅运行一次

问题描述

我正在使用XMLHttpRequest()在输入中分别上传文件。后端正在使用Laravel。

要实现这一点，这是代码的一部分：

表单并输入：

<form id="myformid" name="myformid" method="post" action="{{ route('uploadme') }}" enctype="multipart/form-data">
@csrf
   <div class="input-group" id="input_identificacion">
   <div class="custom-file">
      <input type="file" accept=".pdf" class="file-input" id="inputGroupId" name="pdfdoc" aria-describedby="btn_upload_id">
      <label class="file-label" for="inputGroupId" data-browse="Browse" id="inputLabel">Choose a file</label>
   </div>
   <div class="input-group-append" id="div_upload_btn_id">
       <button class="btn btn-outline-info" type="submit" value="submitId" id="btn_upload_id" title="Upload your file now" disabled><i class="fas fa-file-upload"></i>&nbsp;Upload</button>
   </div>
</div>
</form>

这是 JavaScript 的一部分：

document.getElementById('myformid').addEventListener('submit',function(evt) {
   evt.preventDefault();
   $('#'+btn_upload_id).prop("disabled",true);
   myUpload(this.action,'nameOfInput',e.target.files[0]);
},{once: true});

这是 myUpload（）函数的一部分：

function myUpload(url,field,input_file){

   var data = new FormData();
   var request = new XMLHttpRequest();
   request.responseType = "json";

   data.append(field,input_file);
   data.append("_token","{{ csrf_token() }}");

   {{--Once the request is finished--}}
   request.addEventListener("load",function(e){
      if(request.status === 200){
      }
   }

   request.open("post",url);
   request.send(data);
}

问题是有时我看到文件两次上传到系统。如何防止多次调用myUpload()？

解决方法

您可以将once属性设置为true的选项对象作为第三个参数传递。

document.myformid.addEventListener('submit',function(evt) {
   evt.preventDefault();
   $('#'+btn_upload_id).prop("disabled",true);
   myUpload(this.action,'SomeRequiredvalue',e.target.files[0]);
},{once: true});