解析使用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下操作HTML控件的实现代码
Jan 12 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php下使用以下代码连接并测试
2008/04/09 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python 使用类写装饰器的小技巧
2018/09/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python isinstance函数用法详解
2020/02/13 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
劳动之星获奖感言
2014/02/01 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
出国留学导师推荐信
2015/03/26 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
高中运动会前导词
2015/07/20 职场文书
五年级数学教学反思
2016/02/16 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Python实现8种常用抽样方法
2021/06/27 Python