解析使用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 相关文章推荐
超级退弹代码
Jul 07 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
window.location.hash 使用说明
Nov 08 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
元旦获奖感言
2014/03/08 职场文书
安全目标责任书
2014/07/22 职场文书
稽核岗位职责
2015/02/10 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
捐书活动倡议书
2015/04/27 职场文书
创业计划书之花店
2019/09/20 职场文书
python实现批量移动文件
2021/04/05 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
Redis命令处理过程源码解析
2022/02/12 Redis