解析使用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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
layui 表单标签的校验方法
Sep 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
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python集合用法实例分析
2015/05/30 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python的链表基础知识点
2020/09/13 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
百日安全生产活动总结
2014/07/05 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
师范生见习自我总结
2015/06/23 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Java如何实现树的同构?
2021/06/22 Java/Android