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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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自定义错误日志
2015/02/13 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
优秀教师先进材料
2014/12/16 职场文书
学生保证书
2015/01/16 职场文书
小学运动会入场词
2015/07/18 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server
Windows7下FTP搭建图文教程
2022/08/05 Servers