JS简单实现文件上传实例代码(无需插件)


Posted in Javascript onNovember 15, 2013
<span class="up-btn" id="selectFile">请选择文件</span>
<input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" />

// 点击#selectFile触发input:file的click事件
jQuery('#selectFile').live('click',function(){
  var ie = !-[1,]; 
  if(ie){
   jQuery('input:file').trigger('click').trigger('change');
  }else{
   jQuery('input:file').trigger('click');
  } });

选中文件要触发的事件
 jQuery('input:file').change(function(){
  //dosomthing
 }); 

注意事项:

1、在chrome浏览器下,为了数据安全,隐藏的input:file不能trigger “click” 事件。  所以要设置input:file的透明度达到隐藏的效果。

2、在ie6,7下input file文件不支持onchange事件,所以在此浏览器下我还是用<input type="file" value="" />

Javascript 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 #Javascript
简洁Ajax函数处理(示例代码)
Nov 15 #Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 #Javascript
JavaScript?Apple设备检测示例代码
Nov 15 #Javascript
jquery放大镜效果超漂亮噢
Nov 15 #Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 #Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 #Javascript
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python赋值操作方法分享
2013/03/23 Python
python的类方法和静态方法
2014/12/13 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python实现一个优先级队列的方法
2020/07/31 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
老师对学生的评语
2014/04/18 职场文书
施工工地安全标语
2014/06/07 职场文书
介绍信的格式
2015/01/30 职场文书
父母教会我观后感
2015/06/17 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers