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实战_读书笔记2 选择器
Jan 22 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
Vue scoped及deep使用方法解析
Aug 01 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 引用文件技巧
2010/03/02 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
微信小程序实现自定义底部导航
2020/11/18 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python格式化字符串实例总结
2014/09/28 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python中class的定义及使用教程
2019/09/18 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
求职简历自我评价2015
2015/03/10 职场文书