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 相关文章推荐
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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 socket实现的聊天室代码分享
2014/08/16 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
python list语法学习(带例子)
2013/11/01 Python
python图片验证码生成代码
2016/07/02 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
员工考核管理制度
2014/02/02 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
财务内勤岗位职责
2014/04/17 职场文书
学校花圃的标语
2014/06/18 职场文书
国际贸易求职信
2014/07/05 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
淘宝客服工作职责
2014/07/11 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
单位租房协议书范本
2014/12/04 职场文书