解析使用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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
Javascript自定义事件详解
Jan 13 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
Angularjs按需查询实例代码
Oct 30 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
js+cavans实现图片滑块验证
Sep 29 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 神盾解密工具
2014/06/08 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
js实现表格单列按字母排序
2020/08/12 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
自荐信格式
2013/12/01 职场文书
个人求职信范文分享
2014/01/06 职场文书
销售会议开幕词
2015/01/28 职场文书
稽核岗位职责范本
2015/04/13 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python