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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 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
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
react路由配置方式详解
2017/08/07 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
webpack优化的深入理解
2018/12/10 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python银行系统实战源码
2019/10/25 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
写自荐信三大法宝
2014/01/24 职场文书
美术国培研修感言
2014/02/12 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
python如何正确使用yield
2021/05/21 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python