重置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值设置。

standard

Have your say