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 相关文章推荐
轻松实现js选项卡切换效果
Sep 24 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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生成Gif图片验证码
2013/10/27 PHP
preg_match_all使用心得分享
2014/01/31 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python实现针对中文排序的方法
2017/05/09 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python获取url的返回信息方法
2018/12/17 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
小学教师读书活动总结
2014/07/08 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
贫困证明书范文
2015/06/16 职场文书
新学期感想
2015/08/10 职场文书
2016教师国培研修感言
2015/12/08 职场文书
用Python实现Newton插值法
2021/04/17 Python