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 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
ES6的解构赋值实例详解
May 06 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php操作redis缓存方法分享
2015/06/03 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
用Python实现协同过滤的教程
2015/04/08 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
20行python代码实现人脸识别
2019/05/05 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
python3代码中实现加法重载的实例
2020/12/03 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
员工旷工检讨书
2015/08/15 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
Java中的随机数Random
2022/03/17 Java/Android