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





js清空input file的值

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

清除file类型的input值

file input 不能触发change事件; 清除file input中的内容
  • changerzhuo_319
  • changerzhuo_319
  • 2017-07-25 18:54:57
  • 1749

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

html基本知识
  • xiaouncle
  • xiaouncle
  • 2016-08-01 22:56:37
  • 1775

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

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

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

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

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

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

JS 清空input file的值,兼容所有主流浏览器

var $file; $(document).ready(function(){ $(":file").live("change",function(){ this.outerHTML +=...
  • xpsharp
  • xpsharp
  • 2011-10-20 21:56:46
  • 6745

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

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

js 清空某个div中的input标签值

//清空钢琴曲搜索条件 function clearsongs() { $("#search_songs_a :input").each(function () { $(this)....
  • u011781769
  • u011781769
  • 2014-08-22 09:20:19
  • 6285

js使 input file获得焦点,并且清空该值。

上传控件()用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它。 ...
  • shuiyuehaha
  • shuiyuehaha
  • 2013-11-18 19:51:46
  • 1286
收藏助手
不良信息举报
您举报文章:用Javascript清空(重置)文件类型的INPUT元素的值
举报原因:
原因补充:

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