解析使用JS 清空File控件的路径值


Posted in Javascript onJuly 08, 2013

1.关于如何用脚本修改fileupload控件值的问题,

开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件

这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑)

方法1).使用脚本把这个file的input移动到一个form中,然后调用reset,如果有多个这样的input当然还要再移出来.这个方法我不会采用,因为对.net开发者

来讲习惯了一个页面就一个form所有控件都在其中.

方法2).这个方法有点投机,就是在脚本中调用
var fileup = document.getElementById(fileid);
fileup.outerHTML = fileup.outerHTML; 这个ie对脚本处理以及展现机制有关

方法3).这个主要是在解决ff上的问题时考虑到的,其实就是重新生成了一个id相同的file,这里要注意 name一定也要赋值,否则是很难提交给服务器接受的

在平时项目开发中会有上传文件的功能,一般在前端会通过JS来判断上传文件是否属于指定的文件类型,如果不属于就将控件值清空! (当然你也可以不清空)

有一种方法可以很简单的装文件上传组件的值清空,代码如下:
var file=document.getElementById("form1:fileupload");
file.outerHTML=file.outerHTML

以上方法之能在IE中使用
为了兼容FireFox我们使用下面的方式来清空fileupload控件的值:
<span id='uploadSpan'>
<input type="file">
</span>
<script language="JavaScript">
var html=document.getElementById('uploadSpan').innerHTML;
function resetFile(){
document.getElementById('uploadSpan').innerHTML=html;
}
</script>
这样就行了,各浏览器都支持的

Javascript 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
brook javascript框架介绍
Oct 10 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
使用JS 清空File控件的路径值
Jul 08 #Javascript
JS 修改URL参数(实现代码)
Jul 08 #Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 #Javascript
浅谈JavaScript之事件绑定
Jul 08 #Javascript
JS Map 和 List 的简单实现代码
Jul 08 #Javascript
利用JS实现浏览器的title闪烁
Jul 08 #Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 #Javascript
You might like
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
JS input 数字验证代码
2009/07/30 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python素数检测的方法
2015/05/11 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python之yield和Generator深入解析
2019/09/18 Python
使用python turtle画高达
2020/01/19 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Python unittest框架操作实例解析
2020/04/13 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
管理部部长岗位职责
2013/12/05 职场文书
年终考核评语
2014/01/19 职场文书
小学亲子活动总结
2014/07/01 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python