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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP解析RSS的方法
2015/03/05 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python 实现绘制整齐的表格
2019/11/18 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python偏函数实现原理及应用
2020/11/20 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
运动会广播稿30字
2014/01/21 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
梅花魂教学反思
2014/04/25 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书