从输入类型中删除选定的文件 = IE 中的文件答案

【问题标题】：Remove selected file from Input type = File in IE从输入类型中删除选定的文件 = IE 中的文件
【发布时间】：2015-06-18 13:15:52
【问题描述】：

如何在 IE 中清除选中的文件

以下示例适用于 chrome，但不适用于 IE（任何版本）

http://jsfiddle.net/nfvR9/1/

HTML

<input id="file1" type="file" class="" multiple="" required="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

jQuery

$("#fileUpload").val('');

正如预期的那样，IE 不支持这个。

【问题讨论】：

stackoverflow.com/questions/1043957/… 的可能重复项。检查来自this answer 的工作演示here。

标签： jquery internet-explorer show-hide

【解决方案1】：

您可以使用以下 IE 解决方法

$("#image").remove("");
$("form").append(' <input id="image" type="file" name="image"/>');

小提琴-http://jsfiddle.net/nfvR9/25/

【讨论】：

这只是删除和添加 html。假设输入文件有多个，您将如何仅删除 1 个文件？

【解决方案2】：

我最终做了如下：

function reset_form_element(e) {
            e.wrap('<form>').parent('form').trigger('reset');
            e.unwrap();
        }

然后调用如下函数：

reset_form_element($('#file1'));

【讨论】：

【解决方案3】：

输入文件列表是只读的，所以你不能从中删除任何文件，这就是IE不支持清理输入值的原因。

【讨论】：

【解决方案4】：

我会扩展 jQuery 以拥有“clearFiles”的方法。 jQuery 在 1.9 中贬低了 jQuery.browser，这就是为什么我要检查浏览器是否是带有变量的 IE。

功能扩展：

$.fn.extend({
    clearFiles: function () {
        $(this).each(function () {
            var isIE = (window.navigator.userAgent.indexOf("MSIE ") > 0 || !! navigator.userAgent.match(/Trident.*rv\:11\./));
            if ($(this).prop("type") == 'file') {
                if (isIE == true) {
                    $(this).replaceWith($(this).val('').clone(true));
                } else {
                    $(this).val("");
                }
            }
        });
        return this;
    }
});

用途：

$('#test').click(function () {
    $("[type='file']").clearFiles();
});

这里有一个小提琴。 fiddle

【讨论】：

【解决方案5】：

非常感谢 Amit.rk3 的回答，我修改了他的回答（我本来会放在 cmets 中，但我没有 50 分！！）。 OP 确实说清除选定的文件，所以我假设一个输入。我有一个相当长和复杂的页面，所以我想非常具体地重置哪个输入。下面的代码在 IE(8) 和 FF ESR 上完美运行:)

Select Photo(optional): <span id="form_sp"><input id="file" type="file" size="40" name="photo"/></span> <button id="reset_t">Reset file</button>

<script>
$(document).ready(function(){
    $('#reset_t').click(function(e) {
        e.preventDefault(); // keeps form from submitting
        $("#form_sp").html('');
        $("#form_sp").html('<input id="file" type="file" size="40" name="photo"/>');
    });
});
</script>

【讨论】：