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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
Less 安装及基本用法
May 05 Javascript
react+redux仿微信聊天界面
Jun 21 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中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP自定义多进制的方法
2016/11/03 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
node跨域请求方法小结
2017/08/25 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
简单谈谈Python中的闭包
2016/11/30 Python
python简单实现AES加密和解密
2019/03/28 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
大一新生军训时的自我评价分享
2013/12/05 职场文书
学校元旦晚会方案
2014/02/19 职场文书
艺术教育实施方案
2014/05/03 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
答谢词范文
2015/01/05 职场文书