如何清除JavaScript文件的HTML文件input？
我想清除我的表单中的文件input。
我知道设置来源相同的方法…但该方法不会抹去所选的文件path。
注意 ：我想避免重新加载页面，重置表单或执行AJAX调用。
这可能吗？
如何删除该节点，创build一个具有相同名称的新节点？
有三种方法可以清除javascript文件input：
-
将value属性设置为空或为空。
适用于IE11 +和其他现代浏览器。
-
创build一个新的文件input元素，并replace旧的。
缺点是你将失去事件监听器和expando属性。
-
通过form.reset（）方法重置所有者窗体。
为避免影响同一所有者表单中的其他input元素，我们可以创build一个新的空表单，并将文件input元素附加到这个新表单中并重置它。 这种方式适用于所有浏览器。
我写了一个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); } } } 怎么样：
input.type = "text"; input.type = "file";
我仍然必须明白为什么这不适用于webkit 。
无论如何，这与IE9>，火狐和歌剧。
webkit的情况是我似乎无法将其更改回文件。
IE8的情况是，它会引发安全exception。
编辑：对于WebKit，Opera和Firefox这个工程，虽然：
input.value = '';
（用这个build议检查上面的答案）
我会看看如果我可以find一个更好的更清洁的方式来做这个跨浏览器，而不需要GC。
EDIT2：
try{ inputs[i].value = ''; if(inputs[i].value){ inputs[i].type = "text"; inputs[i].type = "file"; } }catch(e){}
适用于大多数浏览器。 不适用于IE <9，就是这样。
testing了Firefox 20，Chrome 24，Opera 12，IE7，IE8，IE9和IE10。
不幸的是，上面的答案似乎没有涵盖所有的基础 – 至less不是与我的香草JavaScripttesting。
-
.value = null似乎在FireFox，Chome，Opera和IE11上（但不是 IE8 / 9/10） -
.cloneNode（和.clone()在jQuery中）似乎将.value复制过来，因此使得克隆毫无意义。
所以这里是我写的香草JavaScript函数，适用于FireFox（27和28），Chrome（33），IE（8,9,10,11），Opera（17）…这些是目前唯一可用的浏览器给我testing。
function clearFileInput(ctrl) { try { ctrl.value = null; } catch(ex) { } if (ctrl.value) { ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl); } }
ctrl参数是文件input本身，所以函数将被称为…
clearFileInput(document.getElementById("myFileInput"));
将该值设置为''不适用于所有浏览器。
请尝试将值设置为null如下所示：
document.getElementById('your_input_id').value= null;
编辑：我得到了不允许JS设置文件input非常有效的安全原因，但它似乎是合理的，提供一个简单的机制来清除已经select的输出。 我尝试使用空string，但它并没有在所有的浏览器中工作， NULL在所有我试过的浏览器（Opera，Chrome，FF，IE11 +和Safari）都能正常工作。
编辑：请注意，设置为NULL作品在所有浏览器设置为空string没有。
你需要用新的文件input来replace它。 这里是如何使用jQuery完成的：
var inputFile = $('input[type=field]'); inputFile.wrap('<div />');
并在需要清除input字段时使用此行（例如，在某个事件中）：
inputFile.parent().html( inputFile.parent().html() );
解
下面的代码用jQuery工作。 它适用于每个浏览器，并允许保留事件和自定义属性。
var $el = $('#your-input-id'); $el.wrap('<form>').closest('form').get(0).reset(); $el.unwrap();
DEMO
看到这个jsFiddle的代码和演示。
链接
-
使用jQuery清除<input type ='file'/>
-
如何重置JavaScript的文件input
document.getElementById('your_input_id').value=''
编辑：
这一个不工作在IE和歌剧，但似乎工作的Firefox，Safari和铬。
以上的答案提供了一些笨拙的解决scheme，原因如下：
-
我不喜欢首先
wrapinput，然后得到的HTML，这是非常参与和肮脏。 -
跨浏览器的JS很方便，在这种情况下，似乎有太多的未知数可靠地使用
type切换（这又是一个有点肮脏），并将value设置为''
所以我为您提供基于jQuery的解决scheme：
$('#myinput').replaceWith($('#myinput').clone())
它做它所说的，它用自己的克隆replaceinput。 克隆将不会select文件。
优点：
- 简单易懂的代码
- 没有笨拙的包装或types切换
- 跨浏览器兼容性（纠正我，如果我在这里错了）
结果：快乐的程序员
