解析使用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的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
微信小程序8种数据通信的方式小结
Feb 03 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 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
杏林同学录(九)
2006/10/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP attributes()函数讲解
2019/02/03 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
javascript读写json示例
2014/04/11 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
快速了解python leveldb
2018/01/18 Python
OpenCV 模板匹配
2019/07/10 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
化工专业推荐信范文
2013/11/28 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
大班幼儿评语大全
2014/04/30 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
婚内房产协议书范本
2014/10/02 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2019年个人工作总结范文
2019/03/25 职场文书