重置file input

Author : lovecicy
表单中经常有需要上传文件的表单项，但是这是一个比较特殊的表单控件，在各个浏览器中的呈现方式都不一样。在IE中，它的呈现方式是不可输入的输入框加按钮；在Chrome下，它的呈现方式是一个按钮加右边的文件名，如果没有文件被选中，则显示“No file chosen”。FF和IE8显示相同。

除了呈现方式不同之外，其特殊性也表现在其value属性上。因为安全性的问题，我们不能设置它的value值，甚至连读它的value值都不是我们想要的。在IE8下，读value值可以返回真实的文件路径；而在Chrome下则只能返回“C:\fakepath\”+文件名；FF下则只有文件名。

更加棘手的问题是，一旦选中了某个文件，怎么将表单项reset。在Chrome下最简单，直接再点按钮，选择cancel就可以reset了；在FF和IE8下就不行了。在Chrome和FF下，我们可以通过js将input的value设置为空来重置其值，但是在IE8下，value值无法通过js设置。

这样，当需要重置input的值的时候，就不能单纯的通过设置input的value来重置了。

如果可以的话，最简单的方法就是选择input所在的form，调用form的reset方法，这样就没有兼容性问题了。但是我们经常需要对单个的input进行reset而不是整个表单。所以，可以直接将整个input用原来的html替换掉：

var file = document.getElementById(inputId);
file.outerHTML = file.outerHTML;

这样，就可以直接重置input。在MDN给出的outerHTML的浏览器兼容性为：

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (11) 0.2 4.0 7 1.3
也可以通过cloneNode方法，复制file input，并调用父节点的replaceNode方法替换原来的input：

var file = document.getElementById(inputId);
file.value=”";
file.parentNode.replaceChild(file.cloneNode(true),file);

如果中间那句不加的话，火狐下只会复制，不会reset。

如果使用jQuery，可以使用下面的方法：

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

代码中设置input的value为空是因为FF和Chrome可以接受value值设置。