浅谈异步上传插件 jquery-file-upload插件
2015-07-08 14:47
323 查看
当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是。。。今天就来讲一下最简单的使用方法,如果有写的不好的地方还请拍砖。
他的功能非常强大,API也比较简单,如果能够熟练使用$.ajax的话,相信理解起来也不是多难的事,但是它的UI也会非常难用。个人建议,如果小的组件可以自己定义一套简单的UI,没必要使用那么复杂的东西。如果你一定要使用它的UI的话,建议你看一下定制jQuery File Upload为微博式单文件上传
jQuery库,建议jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js : jQuery UI Widget
js/jquery.iframe-transport.js : 扩展iframe数据传输
js/jquery.fileupload.js : jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题
官网事例:
当我们需要点击按钮才能提交上传的时候,按钮上传
当用户选择文件的时候,会触发change事件
在_onChange处理函数中,会遍历files,触发upload插件的change方法
当change函数返回true的时候,会触发upload插件的add方法
在upload插件的回调函数中,会传入两个参数,fn(事件信息, 数据对象),这个数据对象非常重要,我们几乎所有的操作都要使用到它
在upload插件的add方法中可以执行我们的逻辑,例如我们想判断文件后缀是否满足条件,插件自带的参数 acceptFileTypes 在简化模型中不起作用,我们可以在change和add方法中判断,如果不满足返回false即可,如果通过可以直接执行data.submit()进行提交
如果上传成功会执行done函数(响应成功),失败则会执行fail函数
所有的回调函数的原理都是一样的,后面的大家自己研究
自定义实现:
这个插件所有的核心就是上面提到的data数据,我们可以随意的定义UI,但是定义好之后需要对UI和data数据进行绑定,这个是最重要的环节,图中的文件列表右侧的start、cancle按钮都非常好实现,使用简单模型里面的例子既可以了,这里就不多介绍了。
这里面最让人烦恼的就是上面那几个按钮,怎么绑定到所有数据上呢?方法非常简单,就是你把每一个文件的data数据存储在一个地方(可以使用jQuery.data()),在点击上面按钮的时候,查找符合要求的文件列表,读取data信息,调用data.submit...等方法就可以了,SoEasy!
结论
data这个数据对象非常重要,用data能实现你想要的自定义功能。
介绍
jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方式,并且利用了相当多的现代浏览器功能,所以可以实现诸如批量上传、超大文件上传、图片预览、拖拽上传、上传进度显示、跨域上传等功能。他的功能非常强大,API也比较简单,如果能够熟练使用$.ajax的话,相信理解起来也不是多难的事,但是它的UI也会非常难用。个人建议,如果小的组件可以自己定义一套简单的UI,没必要使用那么复杂的东西。如果你一定要使用它的UI的话,建议你看一下定制jQuery File Upload为微博式单文件上传
jQuery File Upload的简化模型
jQuery File Upload包含了一堆文件,首先需要弄清楚的是最核心的部分是哪些,官网已经给出了最简单的模型基本功能,一个最简单的jQuery File Upload上传组件,必须包括以下文件:jQuery库,建议jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js : jQuery UI Widget
js/jquery.iframe-transport.js : 扩展iframe数据传输
js/jquery.fileupload.js : jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题
官网事例:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); } }); }); </script> </body> </html>
当我们需要点击按钮才能提交上传的时候,按钮上传
$(function () { $('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { data.context = $('<button/>').text('Upload') .appendTo(document.body) .click(function () { data.context = $('<p/>').text('Uploading...').replaceAll($(this)); data.submit(); }); }, done: function (e, data) { data.context.text('Upload finished.'); } }); });
浅谈设计原理
当我们对某个file input标签执行 upload插件的初始化方法后,插件会监听这个file input的change事件当用户选择文件的时候,会触发change事件
if ($.support.fileInput) { this._on(this.options.fileInput, { change: this._onChange }); }
在_onChange处理函数中,会遍历files,触发upload插件的change方法
当change函数返回true的时候,会触发upload插件的add方法
在upload插件的回调函数中,会传入两个参数,fn(事件信息, 数据对象),这个数据对象非常重要,我们几乎所有的操作都要使用到它
在upload插件的add方法中可以执行我们的逻辑,例如我们想判断文件后缀是否满足条件,插件自带的参数 acceptFileTypes 在简化模型中不起作用,我们可以在change和add方法中判断,如果不满足返回false即可,如果通过可以直接执行data.submit()进行提交
如果上传成功会执行done函数(响应成功),失败则会执行fail函数
所有的回调函数的原理都是一样的,后面的大家自己研究
自定义UI
聊聊官网自带UI
自定义UI模版需要严格按照官网提供的模版进行操作,否则可能会出现各种问题,必要使用他的模版的原因是:ui的JS中操作Dom的逻辑都是固定的,如果你不按照这种格式的话,js查找不到相应的元素,不能获取相应的数据,包括上面提到的data数据。探讨自定义UI
官网效果:自定义实现:
这个插件所有的核心就是上面提到的data数据,我们可以随意的定义UI,但是定义好之后需要对UI和data数据进行绑定,这个是最重要的环节,图中的文件列表右侧的start、cancle按钮都非常好实现,使用简单模型里面的例子既可以了,这里就不多介绍了。
这里面最让人烦恼的就是上面那几个按钮,怎么绑定到所有数据上呢?方法非常简单,就是你把每一个文件的data数据存储在一个地方(可以使用jQuery.data()),在点击上面按钮的时候,查找符合要求的文件列表,读取data信息,调用data.submit...等方法就可以了,SoEasy!
结论
data这个数据对象非常重要,用data能实现你想要的自定义功能。
相关文章推荐
- jquery 表单 清空
- fullcalendar的简单运用
- uploadify(jquery)插件的使用及图片上传预览
- jQuery操作元素方法总结
- jquery实现json数据填充到table表格中并且实现remove add 数据
- Jquery知识
- Jquery页面跳转 JavaScript 页面跳转 跳转路径错误问题
- jQuery Event对象
- jquery精简选项卡
- jquery的setinterval使用方法
- jQuery end()的使用
- Jquery 记录几个函数
- jquery easyui
- jQuery 实现简单全选、全不选、反选
- 15个web前端的美轮美奂的 jQuery 图片特效
- jQuery--获取Select选择的Text和 Value(转)
- jQuery源码阅读之获取jQuery对象
- jQuery实现类似淘宝网图片放大效果的方法
- jQuery实现tab选项卡效果的方法
- JQuery父节点兄弟节点孩子节点的操作