解析使用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 相关文章推荐
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
vue实现登录拦截
Jun 29 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
使用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
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
js验证表单第二部分
2006/11/25 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
webpack4 处理CSS的方法示例
2018/09/03 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python安装本地whl的实例步骤
2019/10/12 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
化工专业应届生求职信
2013/11/08 职场文书
行政部岗位职责范本
2014/03/13 职场文书
学历公证委托书
2014/04/09 职场文书
主题班会演讲稿
2014/05/22 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
导游词之崇武古城
2019/10/07 职场文书