是否有可能清除<input type='file' />控件值与jQuery?我试过以下几种方法:

$('#control').attr({ value: '' }); 

但这并不奏效。


当前回答

将其设置为异步的,并在完成按钮所需的操作后重置它。

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

其他回答

.clone()东西在Opera(可能还有其他)中不起作用。它保存内容。

对我来说,这里最接近的方法是Jonathan之前的方法,但是确保字段保留其名称、类等,在我的例子中导致了混乱的代码。

像这样的东西可能很管用(也要感谢昆汀):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

它适用于所有浏览器。

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

简单回答:换掉它。

在下面的代码中,我使用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);

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

我已经设法让这个工作使用以下…

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

这已在IE10, FF, Chrome和Opera测试。

有两点需要注意……

在FF中仍然不能正常工作,如果您刷新页面,文件元素将使用所选文件重新填充。我不知道它是从哪里得到这些信息的。还有什么与文件输入元素相关,我可以尝试清除? 记住对附加到文件输入元素的任何事件使用委托,这样它们在克隆时仍然有效。

我不明白的是,到底是谁认为不允许您从无效的不可接受的文件选择中清除输入字段是一个好主意?

不要让我动态地设置它的值这样我就不能从用户的操作系统中窃取文件,但是我可以在不重置整个表单的情况下清除无效的选择。

它不像'accept'做任何事情,除了一个过滤器,无论如何,在IE10,它甚至不理解微软Word mime类型,这是一个笑话!

我能够得到我的工作与以下代码:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));