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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 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入门源程序
2006/10/09 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
js实现常用排序算法
2016/08/09 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
旅游网创业计划书
2014/01/31 职场文书
宣传工作经验材料
2014/06/02 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
工人先锋号申报材料
2014/12/29 职场文书