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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
详解puppeteer使用代理
Dec 27 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
销售职业生涯规划范文
2014/03/14 职场文书
心理健康日活动总结
2014/05/08 职场文书
迎国庆演讲稿
2014/09/15 职场文书
工程质量保证书
2015/05/09 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android