解析使用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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
使用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
2019十大人气国漫
2020/03/13 国漫
php获得文件扩展名三法
2006/11/25 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python实现购物系统(示例讲解)
2017/09/13 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python 创建守护进程的示例
2020/09/29 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
中学生旷课检讨书500字
2014/10/29 职场文书
修辞手法有哪些?
2019/08/29 职场文书
导游词之上海豫园
2019/10/24 职场文书