js 获取、清空input type="file"的值(示例代码)


Posted in Javascript onDecember 24, 2013

上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它。很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了。

js 获取<intput type=file />的值

<html>
<script language='javascript'>  
function   show(){  
var   p=document.getElementById("file1").value;
document.getElementById("s").innerHTML="<input id=pic type=image height=96 width=128 /> ";  
document.getElementById("pic").src=p;
alert(p);   
}  
</script>
<head>
<title>MyHtml.html</title>
</head>
<body>
<input type="file" name="file1" id="file1" onpropertychange="show();" />
<span id="s"></span>
</body>
</html>

清空上传控件(<input type="file"/>)的值的两种方法

方法1:

<span   id=span1>  
<input   name=ab   type=file>  
</span>  
<input   name=button1   type=button   value="按"   onclick=show()>  
<script   language=javascript>  
function   show()  
{  
document.getElementById("span1").innerHTML="<input   name=ab   type=file>";  
}  
</script> 

方法2:
function clearFileInput(file){
var form=document.createElement('form');
document.body.appendChild(form);
//记住file在旧表单中的的位置
var pos=file.nextSibling;
form.appendChild(file);
form.reset();
pos.parentNode.insertBefore(file,pos);
document.body.removeChild(form);
}
Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 #Javascript
JS刷新当前页面的几种方法总结
Dec 24 #Javascript
js中indexof的用法详细解析
Dec 24 #Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 #Javascript
JS Replace 全部替换字符的用法小结
Dec 24 #Javascript
JS获取url链接字符串 location.href
Dec 23 #Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
Javascript编写2048小游戏
2015/07/07 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python中的字典操作及字典函数
2018/01/03 Python
python中的列表与元组的使用
2019/08/08 Python
python脚本后台执行方式
2019/12/21 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python Paramiko使用示例
2020/09/21 Python
Python高并发和多线程有什么关系
2020/11/14 Python
python里glob模块知识点总结
2021/01/05 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
店面出租协议书范本
2014/11/28 职场文书
公司档案管理制度
2015/08/05 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python