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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解Node全局变量global模块
Sep 28 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
详解Python自建logging模块
2018/01/29 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Django的models模型的具体使用
2019/07/15 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python logging模块的使用详解
2020/10/23 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
文明班级建设方案
2014/05/15 职场文书
户籍证明格式
2014/09/15 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python