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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
浅谈js中对象的使用
Aug 11 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
pyenv命令管理多个Python版本
2017/03/26 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python 装饰器的使用示例
2020/10/10 Python
Python jieba库分词模式实例用法
2021/01/13 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
建筑总经理岗位职责
2014/02/02 职场文书
会计人员岗位职责
2014/03/19 职场文书
环保口号大全
2014/06/12 职场文书
商务经理岗位职责
2014/08/03 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
综治目标管理责任书
2015/05/11 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
党小组推荐意见
2015/06/02 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL