在日常使用file input时，都会涉及到文件按钮的重置。
重置一个文件域有三种方式
-
将文件域的value设置为空。
此种方式实现简单，但是只兼容ie11以上或是现代浏览器。在兼容低版本的项目中不适用。
-
克隆或是创建新的file input 元素进行替换
此种方式具有很强的兼容性，但是控件将丢失原有的事件监听器，所以并不适用。
-
调用表单控件的reset方法进行重置
此种方式兼容性好，但是如果重置页面内表单会涉及到重置表内其他控件的问题。这时候可能需要我们创建新的表单将文件域放入后reset，之后再放回原处。示例代码如下
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'), ref = f.nextSibling, p = f.parentNode; form.appendChild(f); form.reset(); p.insertBefore(f,ref); } } }
值得一提的是，如果使用Jquery，表单默认是没有reset方法的。
但是可以通过如下方式间接调用DOM对象的reset方法
$('#formId')[0].reset()
注：此种方式不能重置隐藏域，需要单独处理。
