用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/





清除file类型的input值

file input 不能触发change事件; 清除file input中的内容
  • changerzhuo_319
  • changerzhuo_319
  • 2017年07月25日 18:54
  • 1221

js清空input file的值

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

【Html】清空Input file数据

清除input file标签中的数据方法。
  • Dongle_74
  • Dongle_74
  • 2017年11月20日 14:30
  • 547

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

html基本知识
  • xiaouncle
  • xiaouncle
  • 2016年08月01日 22:56
  • 1605

关于input不同type值的样式重置

所有type通用样式:.input-wrap input{ display: block; outline: none; -webkit-border-radius: 4px;...
  • wjnf012
  • wjnf012
  • 2017年05月26日 20:00
  • 1450

input 标签中 reset 重置不能清空的原因

第一重情况: 点击重置,输入框会被清空 第二种情况: 输入框显示的内容为 abc 如果这时点击重置,不会被清空 如果将abc 修改为了 123 这时点击重置,输入框...
  • xhyzkk
  • xhyzkk
  • 2017年06月13日 11:32
  • 1561

html中重置input标签中的数据的方法,类似于reset

这里就是做了类似于reset的功能 1)这是主要界面代码 用户名: 密码: 电话: 爱好: 2)清空循环清空inpu...
  • xieshuhi_2013
  • xieshuhi_2013
  • 2016年06月26日 13:05
  • 3691

input重置,<a>标签重置

springMVC模式下重置 重置 //查询页面上的重置 function reset(obj) { obj.reset(); }...
  • lcz0615
  • lcz0615
  • 2015年05月05日 10:58
  • 464

js清空form表单里的值,清空input ,清空select

清除表单选择项
  • fei1754294833
  • fei1754294833
  • 2017年03月31日 14:37
  • 10335

js或者jquery清空文本框所有内容

js或者jquery清空文本框所有内容 reset只能重置文本框的内容,有时候不满足我们的需求,可以使用如下方法进行清空文本框的内容: jquery实现: 无标题文档 $(document...
  • zhengqiqiqinqin
  • zhengqiqiqinqin
  • 2013年07月11日 17:10
  • 91867
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用Javascript清空(重置)文件类型的INPUT元素的值
举报原因:
原因补充:

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