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中的排序算法代码
Feb 22 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
解读Vue组件注册方式
May 15 Vue.js
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 登录记住密码实现思路
2013/05/07 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
Element Steps步骤条的使用方法
2020/07/26 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python采集百度百科的方法
2015/06/05 Python
python实现线程池的方法
2015/06/30 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python读取Excel实例详解
2018/08/17 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
python和JavaScript哪个容易上手
2020/06/23 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
Python 内存管理机制全面分析
2021/01/16 Python
生物技术研究生自荐信
2013/11/12 职场文书
人事助理岗位职责
2013/11/18 职场文书
大学军训感言400字
2014/03/11 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
公司仓库管理制度
2015/08/04 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang