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 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
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 常用类汇总 推荐收藏
2010/05/13 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP加密解密函数详解
2015/10/28 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Python 基础之字符串string详解及实例
2017/04/01 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Form表单及django的form表单的补充
2019/07/25 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
如何写好升职自荐信
2014/01/06 职场文书
工厂实习感言
2014/01/14 职场文书
自我鉴定写作要点
2014/01/17 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
六年级小学生评语
2014/12/26 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
听证会主持词
2015/07/03 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Python实现简繁体转换
2021/06/07 Python
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python