Question

我有一个文件输入，当它有文件时会出现一个小图标，以删除所有选定的文件。问题是我已经尝试了很多事情来清理文件输入，但是从未调用过“ on change”事件。仅在按输入并更改所需文件时才调用它，但是如果我清理FileList，它应该算作“更改”，还是我弄错了？

所以我的问题是：在这种情况下，只需单击我的图标即可清除文件输入并仍然发生“更改时”事件的最佳方法是什么？

这是我的代码：

...
<input id="images_file" multiple="multiple" class="file_upload" type="file">

<label for="images_file"><i class="fas fa-camera"></i> Adicionar imagens</label>
<span id="clean_images_file" class="remove_selected_files"><i class="fas fa-times-circle"></i></span>
...

function fileUpload(){
    $( '.file_upload' ).each( function(){
        var $input   = $(this),
            $label   = $input.next('label'),
            $removeFiles = $label.next('span'),
            labelVal = $label.html();
            clone = $input.clone(true);

    $removeFiles.on('click', function(){
       $input.replaceWith(clone);
       $removeFiles.hide();
    })

    $input.on( 'change', function(e){
       alert("change");
       var fileName = '';

       if (this.files) {
          $removeFiles.show("fast");
          if (this.files.length > 1) {
              fileName = `${this.files.length} files added` ;
          } else {
              fileName = "1 file added" ;
          }
       }

       if( fileName )
           $label.html( fileName );
       else
           $label.html( labelVal );
        });
    });
};

Answer 1

清除<input type="file">的最简单方法是将其值设置为null：

const formInput = document.querySelector('input[type=file]');
formInput.value = null;

不幸的是，直接设置value不会导致派发change事件。

一种解决方法是在清除输入时触发您自己的事件：

formInput.value = null
formInput.dispatchEvent(new Event('change', { bubbles: true });

我相信在jQuery中看起来像这样：

const $fileInput = $('input[type=file]');

$('button').on('click', () => {
  $fileInput.val(null);
  $fileInput.trigger('change', { bubbles: true });
})

let i = 0;
$fileInput.on('change', () => console.log(`${$fileInput.prop('files').length} file(s) added`));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple>
<button type="button">Clear</button>

清理文件上传（FileList）不会调用“更改时”事件

1 个答案: