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 select的操作实现代码
May 06 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
店长职务说明书
2014/02/04 职场文书
租房协议书
2014/04/10 职场文书
产品设计开发计划书
2014/05/07 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技