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中令人发指的valueOf方法介绍
Feb 22 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
js实现验证码功能
Jul 24 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
openCV提取图像中的矩形区域
2020/07/21 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
质量承诺书怎么写
2014/05/24 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
电话客服工作职责
2014/07/27 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
教师节随笔
2015/08/15 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python基础 括号()[]{}的详解
2021/11/07 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL