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高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
关于vue组件事件属性穿透详解
Oct 28 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面向对象
2012/02/22 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python写入xml文件的方法
2015/05/08 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python发展史及网络爬虫
2019/06/19 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python如何调用外部系统命令
2019/08/07 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
什么是Remote Module
2016/06/10 面试题
美术教师自我鉴定
2014/02/12 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
上班迟到检讨书
2015/05/06 职场文书
靠谱准确的求职信
2019/04/02 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP