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 方法实现返回多个数据的代码
Apr 30 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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知识收集
2012/08/20 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
js资料prototype 属性
2007/03/13 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
浅析python实现动态规划背包问题
2020/12/31 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
自荐信格式范文
2013/10/07 职场文书
护士自我介绍信
2014/01/13 职场文书
销售团队激励口号
2014/06/06 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书