使用jQuery清除<input type ='file'/>

Question

是否可以<input type='file' />使用jQuery 清除控件值？我尝试过以下方法:

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

但它不起作用.

Answer 1

简单:你<form>在元素周围换行,在表单上调用reset,然后使用unwrap()删除表单.与此线程中的clone()解决方案不同,您最终会得到相同的元素(包括在其上设置的自定义属性).

在Opera,Firefox,Safari,Chrome和IE6 +中测试和使用.除了.unwrap().之外,还适用于其他类型的表单元素.

http://jsfiddle.net/rPaZQ/

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

正如Timo在下面指出的那样,如果你有按钮来触发内部字段的重置.clone(),你必须在事件上调用preventDefault以防止type="hidden"触发提交.

编辑

由于未修复的错误,在IE 11中不起作用.文本(文件名)在输入上被清除,但其<form>列表仍然填充.

Answer 2

快速回答:更换它.

在下面的代码中,我使用replaceWithjQuery方法将控件替换为自身的克隆.如果您有任何处理程序绑定到此控件上的事件,我们也希望保留它们.为此,我们将传入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);

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

Answer 3

Jquery应该为您处理跨浏览器/旧浏览器问题.

这适用于我测试的现代浏览器:Chromium v​​25,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

我没办法用IE测试,但从理论上说这应该可行.如果IE不同以至于Javascript版本不起作用,因为MS以不同的方式完成它,我认为jquery方法应该为你处理它,否则值得指出它与jquery团队一起IE需要的方法.(我看到人们说"这对IE不起作用",但没有香草javascript来展示它如何在IE上工作(据说是一个"安全功能"？),或许也可以将它作为一个错误报告给MS(如果他们愿意的话)算它这样),以便在任何较新的版本中得到修复)

就像在另一个答案中提到的那样,在jquery论坛上发帖

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

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

这个javascript解决方案也适用于我,它是jquery.replaceWith方法的vanilla等价物.

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.clone提供了这个^[*1]

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

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

    fileopen.replaceWith(clone);
});

在jsfiddle

^[*1]如果事件是由jquery的方法添加的,jquery能够这样做,因为它在jquery.data中保存副本,否则它不起作用,所以它有点作弊/解决方法并且意味着事情不是不同方法或库之间兼容.

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

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

    fileopen.replaceWith(clone);
});

在jsfiddle

您无法直接从元素本身获取附加的事件处理程序.

这是vanilla 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和其他库都有维护这样一个列表所需的所有其他支持方法,这只是一个演示.

Answer 4

出于明显的安全原因,您无法设置文件输入的值,即使是空字符串也是如此.

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

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

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

Answer 5

这适合我.

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

希望能帮助到你.

Answer 6

在IE8中,他们将"文件上载"字段设置为只读以确保安全性.查看IE团队博客文章:

从历史上看,HTML文件上载控件()已成为大量信息泄露漏洞的来源.为了解决这些问题,对控件的行为进行了两处更改.

为了阻止依赖"窃取"击键的攻击暗中欺骗用户输入控件的本地文件路径,文件路径编辑框现在是只读的.用户必须使用"文件浏览"对话框显式选择要上载的文件.

此外,"上载文件时包括本地目录路径"URLAction已设置为"禁用"Internet区域.此更改可防止潜在敏感的本地文件系统信息泄漏到Internet.例如,Internet Explorer 8现在只提交文件名image.png,而不是提交完整路径C:\ users\ericlaw\documents\secret\image.png.

Answer 7

$("#control").val('')是你所需要的全部!使用JQuery 1.11在Chrome上测试

其他用户也在Firefox中进行了测试.

Answer 8

我在这里遇到了所有的选择.这是我制作的黑客行为:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

并且您可以使用jQuery触发重置,其代码类似于:

$('#file_reset').trigger('click');

(jsfiddle:http://jsfiddle.net/eCbd6/)

Answer 9

我最终得到了这个:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

可能不是最优雅的解决方案,但据我所知,它可以正常工作.

Answer 10

我使用了https://github.com/malsup/form/blob/master/jquery.form.js,它有一个名为的函数clearInputs(),它是crossbrowser,经过良好测试,易于使用,并处理IE问题和隐藏字段清除如果需要的话.也许只是一个很长的解决方案,只清除文件输入,但如果你正在处理crossbrowser文件上传,那么建议使用此解决方案.

用法很简单:

// Clear all file fields:
$("input:file").clearInputs();

// Clear also hidden fields:
$("input:file").clearInputs(true);

// Clear specific fields:
$("#myfilefield1,#myfilefield2").clearInputs();

/**
 * Clears the selected form elements.
 */
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $(this).replaceWith($(this).clone(true));
            } else {
                $(this).val('');
            }
        }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            //  $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) )
                this.value = '';
        }
    });
};

Answer 11

文件输入的值是只读的(出于安全原因).您不能以编程方式将其空白(除了通过调用表单的reset()方法,该方法具有比该字段更广的范围).

Answer 12

我能够使用以下代码:

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

Answer 13

我一直在寻找清除HTML文件输入的简单干净的方法，上面的答案很不错，但是没有一个能真正回答我想要的答案，直到我在网上找到了一种简单而优雅的方法：

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

所有的功劳归克里斯·科耶尔（Chris Coyier）。

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});