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绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
node.js实现微信开发之获取用户授权
Mar 18 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 冲泡冲煮
一个简单实现多条件查询的例子
2006/10/09 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
javascript 短路法代码精简
2009/08/20 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
理解javascript封装
2016/02/23 Javascript
javascript求日期差的方法
2016/03/02 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
layui table 参数设置方法
2018/08/14 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
Python装饰器用法示例小结
2018/02/11 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python事件驱动event实现详解
2018/11/21 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
python修改文件内容的3种方法详解
2019/11/15 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
中国梦读书活动总结
2014/07/10 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书