jquery - 为什么 IE 不重置文件输入字段？

Question

我修改了我当前的表单，以便在用户选择要上传的文件后触发表单提交。上传完成后，我调用:

$('#file').val('');

重置文件输入字段。

HTML
<input name="file" type="file" id="file"/>

这适用于 Chrome、FF 和 Safari，但不适用于 IE。是否有针对 IE 的解决方法或更好的解决方案？

Answer 1

您不能更改文件输入类型的值，因为这会引入安全漏洞。相反，只需将文件输入替换为新文件即可。代替 $('#file').val('')，这样做:

$('#file').replaceWith('<input name="file" type="file" id="file"/>');

更好的方法是克隆原始版本的副本并将其存储在内存中。当您需要替换它时，只需使用克隆的副本，然后再次克隆它。所以，像这样:

$(document).ready(function() {
    var empty_input = $('#file').clone();

    $('#the-form').on('change', '#file', function(el) {
        $('#the-form').submit(); // assuming the target is a hidden iframe
        $(this).replaceWith(empty_input.clone());
    });
})

请注意，我使用的是委托(delegate)版本 jQuery.on()因此该事件在新输入被替换后仍将在新输入上起作用。