JavaScript实现清空(重置)文件类型INPUT元素值的方法

本文实例讲述了JavaScript实现清空(重置)文件类型INPUT元素值的方法。分享给大家供大家参考，具体如下：

因为安全限制，脚本是不能随意设置其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);
    }
  }
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js 获取、清空input type="file"的值示例代码

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: &l

  • js 限制input只能输入数字、字母和汉字等等

    复制代码 代码如下: <input type="text"onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');if(this.value.split('.').length>2){this.value=this.value.split('.')[0]+'.'+this.value.split('.')[1]}"> 1.文本框只能输入数字代码(小数点也不能输入) 复制代码 代码如下: <i

  • JSP 重置按钮清空传入的表单数据实例

    参考: jquery 表单 清空 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 这个js是可以实现清空表单中填写及传入的值的,但要注意: 1.jq实现,此<input />不能放在form表单内!: 2.直接写在onclick属性中即可

  • js动态修改input输入框的type属性(实现方法解析)

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

  • js使用循环清空某个div中的input标签值

    HTML页面 <div class="col-xs-9" id="search_songs_a"> <table> <tbody> <tr> <th>钢琴曲名称:</th> <td><input type="text" name="info[gqq_name]" id="gqq_name" style="wi

  • js 获取、清空input type="file"的值(示例代码)

    上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: <html>

  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 复制代码 代码如下: var newInput = document.createElement("input"); 2.设定相关属性,如name,type等  复制代码 代码如下: newInput.type=mytype;   newInput.name="input1"

  • js获取input标签的输入值实现代码

    js获取input标签的输入值实现代码

    说明:部分标签和类是封装在框架内的,其效果和html标签差不多. jsp页面: 复制代码 代码如下: <% Date d = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); %><% UserInfo userInfo = (UserInfo) session.getAttribute(ToftConst.Toft_SessionKey_UserData); %> &l

  • JS清空上传控件input(type="file")的值的代码第1/2页

    google找到这样一个解决方法: 在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了. 既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form.js代码:  复制代码 代码如下: var Upload = { clear: function(id){ var up = (typeof id=="string")?d

  • JavaScript实现重置表单（reset）的方法

    本文实例讲述了JavaScript实现重置表单(reset)的方法.分享给大家供大家参考.具体如下: 下面的代码可以对表单内的输入数据进行重置 <!DOCTYPE html> <html> <head> <script> function formReset() { document.getElementById("frm1").reset(); } </script> </head> <body> &

  • jquery js 重置表单 reset()具体实现代码

    在开发中,我们会用到很多表单,我们希望表单提交以后,能reset, 但是jquery没有这个方法,怎么处理呢? 复制代码 代码如下: <form id="form1" action="" method="post" runat="server"> <input name="inp" id="inp" value="1" /> </form

随机推荐