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 28 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
浅析return false的正确使用
Nov 04 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
Vue组件化开发思考
Feb 02 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
javascript操作向表格中动态加载数据
Aug 27 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 strnatcmp()函数的用法总结
2013/11/27 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python根据区号生成手机号码的方法
2015/07/08 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
超市促销实习自我鉴定
2013/09/23 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
计划生育标语
2014/06/23 职场文书
见习报告格式要求
2014/11/04 职场文书
春节随笔
2015/08/15 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis