jQuery实现jQuery-form.js实现异步上传文件


Posted in jQuery onApril 28, 2017

做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8。[纳尼,没遇到过,那你们产品和UI对你也忒好了吧。

遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷。

一、举个栗子

1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery。

2.html 部分:

<form action='' enctype="multipart/form-data" method="post" name="fileForm"> 
<input type="file" class="file" name="filename"> 
</form> 
<button class="btn btn-primary" onclick="subimtBtn();">提交</button>

3.js部分:

function subimtBtn() { 
 var form = $("form[name=fileForm]"); 
 var options = {  
 url:'/upload', //上传文件的路径  
 type:'post',
 success:function(data){  
  console.log(data); 
  //....       //异步上传成功之后的操作
  }
 };  
 form.ajaxSubmit(options); 
}

这样异步上传就完成了,至于后台对上传的文件的获取,跟前台直接提交表单上传文件的方法是一样的。

二、进一步

​ 还没完呢,上面的例子是直接点击的type=file的input异步上传的,可是大家都知道默认的type=file的input框是很难看的,而且无法自定义样式,这个时候,要想做好看,就需要UI提供一个点击上传文件的图,然后把input隐藏,在点击图片的时候,再用js触发input选择文件,然后再点击提交按钮异步上传。嗯,道理上是这样的,然而是要兼容IE 8的呀亲,不信你在IE8 下面跑跑看,一个 “XXX拒绝访问”的大错误赤裸裸的躺在那儿。

​ 其实这个问题呢,是由于IE的安全机制造成的,对于低版本的IE浏览器来说,如果click事件不是直接穿透到input[type=file]元素上的,那么就会禁止提交,所以你用js触发的input选择文件自然就行不通了。

解决方法:使用label元素。

只需要把上面的form标签里的内容改成下面这样:

<label for="upload">
 <img src="upload.png">
</label>
<input type="file" id="upload" class="file" name="filename" style='display:none'>

啊,不对,上面的写法依然不能兼容IE 8,再改改:

<label for="upload">
 <input type="file" id="upload" class="file" name="filename" style='opacity:0;filter:alpha(opacity=0);'> 
</label>

嗯,就是这样,至于那个好看的点击上传的图片,就作为label元素的背景吧。

相信我,这样真的可以了,兼容IE 8完全没问题。

三、更进一步

可能你还需要判断一下上传的文件类型啥的,比如只让上传excel文件,那请这样写:

$(".file").bind("change",function(){ 
  var fileType = $(this).val().substring($(this).val().lastIndexOf(".") + 1);
  if(fileType != "xls" && fileType != "xlsx"){
    alert("只能上传excel文件");
  }
});

四、小结

嗯,也没啥可小结的,其实form.js是一个全,面支持表单的jQuery插件,有很多表单相关的给你,本篇只是介绍了其中一种功能的用法而已,其他更多的用法,请参照https://github.com/jquery-form/form官方文档。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
You might like
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php源码的使用方法讲解
2019/09/26 PHP
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python 异或加密字符串的实例
2018/10/14 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
详解Python高阶函数
2020/08/15 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
服装机修工岗位职责
2013/12/26 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
语文教学感言
2014/02/06 职场文书
进步之星获奖感言
2014/02/22 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
家装电话营销开场白
2015/05/29 职场文书
爱国之歌(8首)
2019/09/29 职场文书
如何用python反转图片,视频
2021/04/24 Python