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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
JavaScript canvas实现流星特效
May 20 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
大学生优秀团员事迹材料
2014/01/30 职场文书
怎样填写就业意向
2014/04/02 职场文书
詹天佑教学反思
2014/04/30 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
房产协议书范本
2014/10/18 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL