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语言中的Literal Syntax特性分析
Mar 08 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
用js实现放大镜效果
Oct 28 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
用js得到网页中所有的div的id
2020/10/19 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python pymsql模块的使用
2020/09/07 Python
祖国在我心中演讲稿600字
2014/05/04 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
生物技术专业求职信
2014/06/10 职场文书
装修公司管理制度
2015/08/05 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL