从IE的文件输入类型中删除所选文件

Question

如何在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不支持此功能。

- user2739418

---

可能是 https://dev59.com/TnNA5IYBdhLWcg3wPLL- 的重复问题。请查看此答案中的工作演示：这里。 - lmgonzalves

Answer 1

输入文件列表是只读的，所以您无法从中删除任何文件，这就是为什么IE不支持清除输入值的原因。

- Luiz Eduardo Simões

Answer 2

你可以使用以下方法解决IE的问题

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

代码片段- http://jsfiddle.net/nfvR9/25/

- Amit.rk3

---

这只是删除和添加HTML。假设输入文件有多个，你如何仅从一个文件中删除它？ - Fai Zal Dong

Answer 3

我最终做的如下：

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

然后按照以下方式调用函数：

reset_form_element($('#file1'));

- user2739418

Answer 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;
    }
});

Use:

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

这是一个 JSFiddle。 fiddle

- Sean Wessell

Answer 5

非常感谢Amit.rk3的回答，我修改了他的回答（本来我想在评论中发表的，但是我没有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>

- Tom aka Sparky