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 学习笔记 选择器之二
Jul 23 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 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
linux php mysql数据库备份实现代码
2009/03/10 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP实现货币换算的方法
2014/11/29 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
js实现页面转发功能示例代码
2013/08/05 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
python运用sklearn实现KNN分类算法
2019/10/16 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
银行职业规划书范文
2013/12/28 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
户外活动策划方案
2014/03/12 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
公司委托书格式范文
2014/10/09 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
跑出一片天观后感
2015/06/08 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python