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检测函数
May 31 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
javascript事件模型介绍
May 31 Javascript
angular.js分页代码的实例
Jul 27 Javascript
纯JS实现简单的日历
Jun 26 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
react中的DOM操作实现
Jun 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
php调用mysql存储过程
2007/02/14 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
详解php反序列化
2020/06/10 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JS作用域深度解析
2016/12/29 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
python实现八大排序算法(1)
2017/09/14 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python可迭代对象去重实例
2020/05/15 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
写给学生的新学期寄语
2014/01/18 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
人事专员岗位职责
2015/02/03 职场文书
法院个人总结
2015/03/03 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android