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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
多广告投放代码 推荐
Nov 13 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
js三种排序算法分享
Aug 16 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue点击页面空白处实现保存功能
Nov 06 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中数据的批量导入(csv文件)
2006/10/09 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python实现机器人卡牌
2019/10/06 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
基于python图像处理API的使用示例
2020/04/03 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
高三霸气励志标语
2014/06/24 职场文书
小学家长学校培训材料
2014/08/24 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015年入党决心书
2015/02/05 职场文书
干部培训工作总结2015
2015/05/25 职场文书
遗嘱格式范本
2015/08/07 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS