解析使用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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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版)
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php实现文章评论系统
2019/02/18 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
国外的一些J2EE面试题一
2012/10/13 面试题
办公室文秘岗位职责
2013/11/15 职场文书
春节联欢会主持词
2014/03/24 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2015年元旦促销方案书
2014/12/09 职场文书