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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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字符串word末字符实现大小写互换的方法
2014/11/10 PHP
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js获取内联样式的方法
2015/01/27 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
浅谈React高阶组件
2018/03/28 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python reduce()函数的用法小结
2017/11/15 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python求解汉诺塔游戏
2020/07/09 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
《桂林山水》教学反思
2014/02/08 职场文书
党员干部承诺书
2014/03/25 职场文书
兵马俑的导游词
2015/02/02 职场文书
导师工作推荐信
2015/03/27 职场文书
收银员岗位职责范本
2015/04/07 职场文书
国富论读书笔记
2015/06/26 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016年校长新年寄语
2015/08/17 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python