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基础篇
Nov 13 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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中for循环语句的几种变型
2006/11/26 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
js资料prototype 属性
2007/03/13 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Vue实现简易计算器
2020/02/25 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python线程池threadpool实现篇
2018/04/27 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python全栈知识点总结
2019/07/01 Python
django列表筛选功能的实现代码
2020/03/27 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python进行统计建模
2020/08/10 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
护理自我鉴定范文
2013/10/06 职场文书
给男朋友的道歉信
2014/01/12 职场文书
大学生社会实践评语
2014/04/25 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
行风评议整改报告
2014/11/06 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
学历证明样本
2015/06/16 职场文书
MySQL transaction事务安全示例讲解
2022/06/21 MySQL
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers