用Javascript清空(重置)文件类型的INPUT元素的值

原创 2014年07月08日 08:47:27

之前在StackOverflow回答了这个问题,现在整理到Blog里。

因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置。

重置一个文件域的值,归纳起来主要有 3 种方法。

本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo。


重置文件域的三种方法:

  1. 设置value属性为空。
    对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Opera...有效。
  2. 克隆或创建一个新的文件输入元素进行替换。
    利用createElement或者cloneNode克隆或创建一个新元素进行替换,适用于所有浏览器。缺点也很明显,就是替换后,将丢失原先绑定的事件监听器,并丢失一些自定义的expando属性。没有这个问题的情况下可以使用,不通用,我不建议使用这个方法。
  3. 调用表单form元素的reset()方法。
    form元素的reset()方法会重置表单内的所有输入元素,这并不是我们期望的,所以可以变通一下,创建一个新的form对象,将文件input元素放进去之后再reset,再把文件input元素取出来放回原处,这样就不会出现方法2的弊端了。

利用方法1和方法3结合,可以做到兼容所有浏览器。

Javascript函数代码如下:

    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);
            }
        }
    }

查看demo: http://jsbin.com/muhipoye/1/





相关文章推荐

清空input file的值

今天在做选择本地图片上传的功能时遇到一个问题,第一次选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,这个过程没有问题,问题出在当把创建的img元素节点删除后,再点fi...

清除file类型的input值

file input 不能触发change事件; 清除file input中的内容

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

javascript 清空input file 中的数据

1.例如下:     html: JS: var file = document.getElementById("fileData"); // for IE, Ope...

js清空input类型为type的文件框的内容

用到了文件域,在选择文件后想要清空文件的内容,在网上找了好久都是有以下几种说法,但是试了都没有用: 文件域如下:   第一种: var obj = document.getElem...

清空浏览器文件选择框中的值(清空 file input 的值)

火狐中如下 $(setAttrById("deliverMethodIconInput", "value", "");

清空input=file的value

使用form的reset即可 document.getElementById('form1').reset();

jquery 清空 file的值

也不是原创,是看别人的 就是我们选择了一个文件,进行上传后,再次动作,再上传一个文件 $("#file").val("");  清空数据,为什么  $("#file").val()不行 ...

input type=file浏览修改,不清空file值,提交表单

input type=file浏览修改,不清空file值,提交表单                                   网上看了很多方法,说改这个封装好的组件value的,绝大部...

从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

html基本知识
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript清空(重置)文件类型的INPUT元素的值
举报原因:
原因补充:

(最多只允许输入30个字)