如何使用JavaScript清除HTML文件输入？

我想清除表单中的文件输入.

我知道将源设置为相同的方法......但该方法不会擦除所选的文件路径.

注意:我想避免重新加载页面,重置表单或执行AJAX调用.

这可能吗？

1> cuixiping..：

---

有三种方法可以使用javascript清除文件输入:

将value属性设置为空或null.

适用于IE11 +和其他现代浏览器.

创建一个新的文件输入元素并替换旧的.

缺点是您将丢失事件侦听器和expando属性.

通过form.reset()方法重置所有者表单.

为了避免影响同一所有者表单中的其他输入元素,我们可以创建一个新的空表单并将文件输入元素附加到此新表单并重置它.这种方式适用于所有浏览器.

我写了一个javascript函数.演示: http ://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

---

如果您想要保留以编程方式添加到元素的事件和其他属性,那么使用方法2或3可能会产生一些警告.在我的例子中,我向表单元素添加了一个onclick事件,表单元素在表单重置后消失了.在这种情况下,方法1更好.(这是2.,但也可能发生在3.)

2> brunoais..：

---

怎么样:

input.value = '';

我还是要明白为什么这并不能一起工作的WebKit.

无论如何,这适用于IE9>,Firefox和Opera.
webkit的情况是我似乎无法将其更改回文件.
使用IE8,情况是它会引发安全异常.

编辑: 对于webkit,Opera和Firefox这是有效的,但是:

input.type = "text";
input.type = "file";

(用这个提议检查上面的答案)

我会看看我是否能找到一种更好的清洁方式来完成这种跨浏览器而无需使用GC.

EDIT2:

input.value = '';

适用于大多数浏览器.不适用于IE <9,就是这样.
测试了firefox 20,chrome 24,opera 12,IE7,IE8,IE9和IE10.

3> BigMac66..：

---

将值设置为''不适用于所有浏览器.

而是尝试将值设置为null如下:

document.getElementById('your_input_id').value= null;

编辑:我得到了不允许JS设置文件输入的非常有效的安全性原因,但是提供一个简单的机制来清除已经选择的输出似乎是合理的.我尝试使用空字符串,但它并不适用于所有浏览器,NULL在我尝试的所有浏览器(Opera,Chrome,FF,IE11 +和Safari)中都有效.

编辑:请注意,设置为NULL空字符串时设置适用于所有浏览器没有.

---

不幸的是,我没有在"所有浏览器"中看到这个...它在IE8,IE9或IE10中不起作用(但在IE11中可以工作).

4> freefaller..：

---

不幸的是,上述答案似乎都没有涵盖所有基础 - 至少不是我用vanilla javascript测试.

.value = null似乎适用于FireFox,Chome,Opera和IE11(但不是 IE8/9/10 )

.cloneNode(并.clone()在jQuery中)FireFox似乎复制.value过来,因此使克隆无意义.

所以这里是我编写的vanilla javascript函数,适用于FireFox(27和28),Chrome(33),IE(8,9,10,11),Opera(17)......这些是目前唯一可用的浏览器给我测试.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

该ctrl参数是文件输入本身,所以该函数将被称为...

clearFileInput(document.getElementById("myFileInput"));

5> Jamland..：

---

你需要用新的文件输入替换它.以下是如何使用jQuery完成的:

var inputFile = $('input[type=field]');
inputFile.wrap('
');

当您需要清除输入字段时(例如某些事件),请使用此行:

inputFile.parent().html( inputFile.parent().html() );

6> Gyrocode.com..：

---

解

以下代码适用于jQuery.它适用于每个浏览器,并允许保留事件和自定义属性.

var $el = $('#your-input-id');
$el.wrap('
').closest('form').get(0).reset();
$el.unwrap();

DEMO

有关代码和演示,请参阅此jsFiddle.

链接

使用jQuery清除

如何使用JavaScript重置文件输入

7> DFectuoso..：

---

如何删除该节点,创建一个具有相同名称的新节点？

---

你怎么样,请给我一个例子.

8> Soufiane Has..：

---

document.getElementById('your_input_id').value=''

编辑:
这个在IE和Opera中不起作用,但似乎适用于firefox,safari和chrome.

---

这对我有用,虽然我总是问自己多久.