你可以像这样用它的克隆来替换它

var clone = $('#control').clone();

$('#control').replacewith(clone);

但这个克隆与它的价值太，所以你最好喜欢这样

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

出于明显的安全原因，您不能设置文件输入的值，甚至是空字符串。

你所要做的就是重置字段所在的表单，或者如果你只想重置包含其他字段的表单的文件输入，使用这个:

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

这里有一个例子:http://jsfiddle.net/v2SZJ/1/

Jquery应该为你解决跨浏览器/旧浏览器的问题。

这适用于我测试的现代浏览器:Chromium v25、Firefox v20、Opera v12.14

使用jquery 1.9.1

HTML

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

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

据jsfiddle

下面的javascript解决方案也适用于我上面提到的浏览器。

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

据jsfiddle

I have no way to test with IE, but theoretically this should work. If IE is different enough that the Javascript version does not work because MS have done it in a different way, the jquery method should in my opinion deal with it for you, else it would be worth pointing it out to the jquery team along with the method that IE requires. (I see people saying "this won't work on IE", but no vanilla javascript to show how it does work on IE (supposedly a "security feature"?), perhaps report it as a bug to MS too (if they would count it as such), so that it gets fixed in any newer release)

就像在jquery论坛的另一个帖子中提到的

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

但是jquery现在已经删除了对浏览器测试的支持。

这个javascript解决方案也为我工作，它是香草的jquery等价。replaceWith方法。

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

据jsfiddle

需要注意的重要一点是，cloneNode方法不保存相关的事件处理程序。

请看这个例子。

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

据jsfiddle

但是jquery。克隆提供[*1]

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

据jsfiddle

[*1]如果事件是由jquery的方法添加的，jquery能够做到这一点，因为它在jquery中保留了一个副本。数据，否则它不能工作，所以这是一种欺骗/变通，意味着不同方法或库之间不兼容。

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

据jsfiddle

您不能直接从元素本身获得附加的事件处理程序。

这是在香草javascript的一般原则，这是如何jquery和所有其他库做的(粗略)。

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

据jsfiddle

当然，jquery和其他库有维护这样一个列表所需的所有其他支持方法，这只是一个演示。

---

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

简单:将<form>环绕在元素周围，在表单上调用reset，然后使用.unwrap()删除表单。与此线程中的.clone()解决方案不同，在结束时您将得到相同的元素(包括在其上设置的自定义属性)。

测试和工作在Opera, Firefox, Safari, Chrome和IE6+。也适用于其他类型的表单元素，除了type="hidden"。

窗口。重置=函数(e) { e.wrap .closest(“< >形式”)(“形式”). get (0) .reset (); e.unwrap (); ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < >形式 <input id="file" type="file"> < br > <input id="text" type="text" value="Original"> > < /形式 <按钮onclick = "重置($(' #文件'))“>重置文件> < /按钮 <按钮onclick = "重置($(' #文本'))“>重置文本> < /按钮

JSFiddle

正如Timo在下面指出的那样，如果您有按钮来触发<表单>内部字段的重置，那么您必须在事件上调用. preventdefault()来防止<按钮>触发提交。

---

EDIT

由于一个未修复的错误，无法在ie11中工作。输入中的文本(文件名)被清除，但其file列表仍然填充。

简单回答:换掉它。

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

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

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