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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
javascript arguments使用示例
2014/12/16 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
更新修改后的Python模块方法
2019/03/03 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python gevent协程切换实现详解
2020/09/14 Python
python的dict判断key是否存在的方法
2020/12/09 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
如何查找网页漏洞
2016/06/22 面试题
竞聘演讲稿范文
2014/01/12 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
2015毕业寄语大全
2015/02/26 职场文书
教导处教学工作总结
2015/08/12 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python时间操作之pytz模块使用详解
2022/06/14 Python