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


Posted in Javascript onNovember 17, 2016

本文实例讲述了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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 #Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 #Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 #Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 #Javascript
leaflet的开发入门教程
Nov 17 #Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
You might like
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python读取几个G的csv文件方法
2019/01/07 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python FFT合成波形的实例
2019/12/04 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
金鑫耀Java笔试题
2014/09/06 面试题
自荐信格式的六要素
2013/09/21 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
公休请假条
2014/04/11 职场文书
调查研究项目计划书
2014/04/29 职场文书
公司辞职信模板
2015/05/13 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL