如何从引导程序 4 输入文件中清除任何其他先前选择的文件

Question

我有一个带有input file 的表单，我用 Bootstrap 4 实现了该表单。这个输入文件不能开箱即用，因为它需要 Javascript 才能按预期工作：用户单击“浏览文件”按钮，一个窗口打开，用户选择他们的文件，点击打开/选择，文件名最终显示在输入字段中。

<form id="my_form" name="my_form" method="post" action="/action" enctype="multipart/form-data">
   <div class="input-group" id="div_input">
      <div class="custom-file">
         <input type="file" accept=".pdf" class="custom-file-input" id="myInputGroup" name="userfile" aria-describedby="btnUpload">
         <label class="custom-file-label" for="myInputGroup" data-browse="Browse files" id="input_label_identificacion">Select a file</label>
      </div>
      <div class="input-group-append" id="divBtnUpload">
         <button class="btn btn-outline-info" type="submit" value="submitFile" id="btnUpload" title="Upload your file" disabled>Upload</button>
      </div>
   </div>
</form>

这是使它工作的 javascript 文件：

$('#myInputGroup').on('change',function(e){
    {{--//get the file name--}}
    var fileName = e.target.files[0].name;
    {{--replace the "Choose a file" label--}}
    $(this).next('.custom-file-label').html(fileName);
    
    enableUploadButton(inputIdentificacionId,btnIdentificacionId);
    
    document.getElementById('my_form').addEventListener('submit', function(evt) {
        evt.preventDefault();
        $('#'+btnIdentificacionId).prop("disabled",true);
        upload(this.action,'userfile',e.target.files[0]);
    }, {once: true});
});

我已经实现了一个javascript按钮“上传文件”，用户点击它并上传文件。到目前为止一切顺利。

我看到的问题是，如果用户浏览文件，选择它，然后如果用户再次单击“浏览文件”按钮，则最后选择的文件被发送两次或至少发送次数用户选择了一个文件。

所以我想在用户浏览文件时清除输入文件。这是我迄今为止在 javascript 中尝试过的：

$('#myInputGroup').on('click',function (e){
   document.getElementById('inputGroup_solicitud').value= null;
   //console.log('User is browsing ...');
   //console.log(this.files);
   inputGroup_solicitud.value='';//My attempt to clear the input but it doesn't work
   e.target.files=null;
   this.files=null;
});

但是，问题仍然存在。如果用户再次单击并选择任何文件，则上传功能会将上次选择的文件发送两次到服务器，或者至少是用户单击“浏览按钮”并选择文件的次数。

注意可能重复的问题 This answer 不能帮助我解决我的问题，因为问题实际上是每次用户浏览文件时都会添加一个“addEventListener()”。其他问题未解释此细节。

如何清除输入文件以防止发送多个文件？

Answer 1

每次更改事件触发时，您都会添加一个新的事件侦听器。因此，当用户单击提交时，会触发多个事件侦听器：每次浏览文件时都会触发一个。这些中的每一个都会上传文件，从而导致您的问题。

要修复它，您需要移动代码块：

document.getElementById('my_form').addEventListener('submit' 
...

在封闭的变更处理程序之外。您需要两个范围之外的 var 才能在两个事件处理程序之间共享文件。像这样的东西（未经测试！）：

// Both event handler can access this var
var file;

$('#myInputGroup').on('change',function(e){
    var fileName = e.target.files[0].name;
    $(this).next('.custom-file-label').html(fileName);
    enableUploadButton(inputIdentificacionId,btnIdentificacionId);
    // Store the file to be uploaded
    file = e.target.files[0];
});
    
document.getElementById('my_form').addEventListener('submit', function(evt) {
    evt.preventDefault();
    $('#'+btnIdentificacionId).prop("disabled",true);
    // Retrieve and upload your file
    upload(this.action,'userfile',file);
}, {once: true});