如何从 bootstrap 4 输入文件中清除任何其他先前选择的文件

Question

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

<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});

如何从 bootstrap 4 输入文件中清除任何其他先前选择的文件

How to clear any other previously selected file from bootstrap 4 input file

html

javascript

bootstrap-4

bootstrap-file-input