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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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中的串行化变量和序列化对象
2006/09/05 PHP
如何获得PHP相关资料
2006/10/09 PHP
php生成文件
2007/01/15 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
公司庆典邀请函范文
2014/01/13 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
军训结束新闻稿
2015/07/17 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL