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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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
smarty的保留变量问题
2008/10/23 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
详解express与koa中间件模式对比
2017/08/07 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
重构Python代码的六个实例
2020/11/25 Python
Python排序函数的使用方法详解
2020/12/11 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Java基础面试题
2012/11/02 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年团总支工作总结
2014/11/21 职场文书
个人汇报材料范文
2014/12/30 职场文书
开业典礼致辞
2015/07/29 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
frg-100简单操作(设置)说明
2022/04/05 无线电