重置文件上传按钮是如此容易使用纯JavaScript!

有几个方法可以做到这一点，但必须直接的方法，这是在许多浏览器工作良好的改变文件值为零，这样上传文件得到重置，也尝试使用纯javascript而不是任何框架，我创建了下面的代码，检查一下(ES6):

函数resetFile() { const file = document.querySelector('.file'); 文件。Value = "; ｝ <input type="file" class="file" /> <按钮onclick = " resetFile ()“>重置文件> < /按钮

另一种解决方案(不选择HTML DOM元素)

如果你在输入中添加了'change'事件监听器，那么在javascript代码中你可以调用(对于某些特定的条件):

event.target.value = '';

例如在HTML中:

<input type="file" onChange="onChangeFunction(event)">

在javascript中:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }

有许多方法，我将建议去参考附件输入。

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

在提交后清除值。

this.fileInput.value = "";

重置输入文件是非常单一的

$（'input[type=file]'）.val（null）;

如果你绑定重置文件中更改表单的其他字段，或者用ajax加载表单。

本例适用

选择器，例如$('input[type=text]')或表单的任何元素

事件单击，更改，或任何事件

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

@dhaval-marthak在评论中发布的jQuery解决方案显然是有效的，但如果你看看实际的jQuery调用，就很容易看出jQuery在做什么，只是将value属性设置为空字符串。所以在“纯”JavaScript中，它将是:

document.getElementById("uploadCaptureInputFile").value = "";

你可以克隆它，用它自己替换它，所有事件仍然附加:

<input type="file" id="control">

and

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

谢谢:csstricks.com