js 获取、清空input type="file"的值示例代码


Posted in Javascript onFebruary 19, 2014

上传控件基础知识说明:

上传控件(<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 图片上传预览-兼容标准
Jun 01 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
Vue表单实例代码
Sep 05 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
js实现身份证号码验证的简单实例
Feb 19 #Javascript
js实现表格字段排序
Feb 19 #Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 #Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 #Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 #Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 #Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
python安装twisted的问题解析
2018/08/21 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
教师师德承诺书
2014/03/26 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
红色影片观后感
2015/06/18 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js