解析使用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 继承详解(一)
Jul 13 Javascript
jQuery 表格插件整理
Apr 27 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
vue实现顶部菜单栏
Nov 08 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+mysql 实现身份验证代码
2010/03/24 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python中logging模块的用法实例
2014/09/29 Python
Python中生成Epoch的方法
2017/04/26 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
django实现前后台交互实例
2017/08/07 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
神经网络python源码分享
2017/12/15 Python
python去除文件中重复的行实例
2018/06/29 Python
Django REST framework视图的用法
2019/01/16 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
升国旗演讲稿
2014/09/05 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
优秀护士事迹材料
2014/12/25 职场文书
小学班主任评语
2014/12/29 职场文书
婚姻出轨保证书
2015/05/08 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis