File Input的重置

在日常使用file input时，都会涉及到文件按钮的重置。

重置一个文件域有三种方式

1. 将文件域的value设置为空。

   此种方式实现简单，但是只兼容ie11以上或是现代浏览器。在兼容低版本的项目中不适用。

2. 克隆或是创建新的file input 元素进行替换

   此种方式具有很强的兼容性，但是控件将丢失原有的事件监听器，所以并不适用。

3. 调用表单控件的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()

注：此种方式不能重置隐藏域，需要单独处理。