使用 jQuery 清除<输入类型='file' />

简单：将 a 环绕在元素周围，在窗体上调用 reset，然后使用 .与此线程中的其他解决方案不同，您最终会在末尾使用相同的元素（包括在其上设置的自定义属性）。<form>.unwrap().clone()

在Opera，Firefox，Safari，Chrome和IE6 +中进行测试和工作。也适用于其他类型的表单元素，但 .type="hidden"

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

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

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

正如 Timo 在下面所指出的，如果您有按钮来触发 内字段的重置，则必须调用该事件以防止 触发提交。<form>.preventDefault()<button>

编辑

由于未修复的错误，在 IE 11 中不起作用。文本（文件名）在输入中清除，但其列表仍保持填充状态。File

快速回答：更换它。

在下面的代码中，我使用 replaceWith jQuery 方法将控件替换为自身的克隆。如果有任何处理程序绑定到此控件上的事件，我们也希望保留这些处理程序。为此，我们传入作为 clone 方法的第一个参数。true

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

小提琴：http://jsfiddle.net/jonathansampson/dAQVM/

如果在保留事件处理程序的同时进行克隆，则会出现任何问题，您可以考虑使用事件委派来处理从父元素对此控件的单击：

$("form").on("focus", "#control", doStuff);

这样就可以避免在刷新控件时将任何处理程序与元素一起克隆。