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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 Javascript
vue实现PC端分辨率适配操作
Aug 03 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
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python基本语法练习实例
2017/09/19 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Pygame框架实现飞机大战
2020/08/07 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
绝对经典成功的大学生推荐信
2013/11/08 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书