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 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
js实现淘宝首页的banner栏效果
Nov 26 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
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
php文件包含的几种方式总结
2019/09/19 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python图片验证码生成代码
2016/07/02 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python和shell获取文本内容的方法
2018/06/05 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python SocketServer源码深入解读
2019/09/17 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
双方协议书
2014/04/22 职场文书
婚前保证书
2014/04/29 职场文书
学风建设主题班会
2015/08/17 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫