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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
农民和部队如何穿矿
2020/03/04 星际争霸
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python的pygame安装教程详解
2020/02/10 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python一些性能分析的技巧
2020/08/30 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
初中历史教学反思
2016/02/19 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python