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 相关文章推荐
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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 日漫
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
PHP7 弃用功能
2021/03/09 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
js实现聊天对话框
2020/02/08 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
介绍Python中的fabs()方法的使用
2015/05/14 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
大学生就业推荐信范文
2013/11/29 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
2014年客房部工作总结
2014/11/22 职场文书
升职感谢信
2015/01/22 职场文书
团拜会主持词
2015/07/04 职场文书
教师师德工作总结2015
2015/07/22 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL