解析使用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获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
react-router中的属性详解
Jun 01 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
react MPA 多页配置详解
Oct 18 Javascript
使用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中让curl支持sock5的代码实例
2015/01/21 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
django之常用命令详解
2016/06/30 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python正则实现提取电话功能
2018/02/24 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
质量承诺书怎么写
2014/05/24 职场文书
影视广告专业求职信
2014/09/02 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
科技馆观后感
2015/06/08 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript