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 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 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桌面中心(一) 创建数据库
2007/03/11 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
初识php MVC
2014/09/10 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
Python中turtle作图示例
2017/11/15 Python
python 多线程重启方法
2019/02/18 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
意大利男装网店:Vrients
2019/05/02 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
给医院的感谢信
2015/01/21 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
浅谈Python项目的服务器部署
2021/04/25 Python
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers