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方法和技巧大全
Dec 27 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
JS自定义滚动条效果
Mar 13 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python显示天气预报
2014/03/02 Python
Python列表list排列组合操作示例
2018/12/18 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
如何选择使用结构还是类
2014/05/30 面试题
出国导师推荐信
2014/01/16 职场文书
会计专业导师推荐信
2014/03/08 职场文书
商超业务员岗位职责
2014/03/12 职场文书
一年级学生评语大全
2014/04/21 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
征求意见函
2015/06/05 职场文书