Fine Uploader文件上传组件
最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要求类似IE版本必须是9或是更高的IE10].在不同浏览器中提供统一用户体验.该组件基本覆盖目前所有主流浏览器.同时没有任何第三方组件依赖.相当Clear.在服务器端已经覆盖支持了ASP.NET/ColdFusion/Java/Node.js/Perl/PHP/Python. 对上传细节类似限制文件大小,文件类型,文件上传的数量等通过统一接口以暴露选项方式操作. 看到Github 上Fine Uploader按照官方的说法. Fine Uploader前身是Ajax Upload. 新版本Fine Uploader主要添加一些新特性.从1.0版本发布的Realse Note来看.二者最大的区别在于.Fine Uploder不在基于Jquery组件.而某些细节处理也更加统一严格.类似返回值全部统一为Json格式.对后台服务器操作和前端Dom对象一些操作Code全部集中Js Script脚本文件中.这样集成使Fine Uploader组件使用非常简单.只需要添加一个CSS+JavaScript文件即可实现文件上传.大大简化用户引用和操作组件难度. Fine Uploader特点如下:
在Git Hub上Fine Uploader上下载打包源码,在Php Designer 8中打开其源码可以看到其源码结构如下:
在根目录中可以看到Client客户端调用需要使用文件.Server目录则是对应不同语言Perl/Php/Asp.net[VB]等版本实现.test目录则有包含一个完整本地Sample Demo.可供参考. 如何快速构建一个简单Demo? 其实官方在Basic-Demo-Page上已经给出一个简单的演示.这里基于Bootstrap方式构建. 首先新建一个Html空白页面.命名FineUploderDemo.html.添加如下CSS引用如下: 1: <link href="static/css/fineuploader.css" rel="stylesheet"> 2: ="static/css/bootstrap.min.css" > 这两个文件时必须引用的.fineuploader.css则是对应下载Fine Uploder源码Client目录下.fineuploder.css 提供JS脚本中所需的CSS样式,主要包括按钮的样式、进度显示的样式以及上传结果的样式.添加JavaScript文件引用如下: 1: <script src="static/script/fineupload/header.js"></script>
2: <"static/script/fineupload/util.js"></script> 3: <"static/script/fineupload/button.js"></ 4: <"static/script/fineupload/handler.base.js"></ 5: <"static/script/fineupload/handler.form.js"></ 6: <"static/script/fineupload/handler.xhr.js"></ 7: <"static/script/fineupload/uploader.basic.js"></ 8: <"static/script/fineupload/dnd.js"></ 9: <"static/script/fineupload/uploader.js"></script> 其中uploder.js和uploder.basic.js则是前端的所有上传功能都在该脚本中实现.必须引用. 同时添加client目录下processing和loading两张进度显示所需要的动态图片.该图片都在fineuploder.css文件调用. 在body添加如下Code: 1: <div id="bootstrapped-fine-uploader"></div>
2: <script> 3: function createUploader() { 4: var uploader = new qq.FineUploader({
5: element: document.getElementById('bootstrapped-fine-uploader'),
6: request: { 7: endpoint: 'server/handlerfunction'
8: }, 9: text: { 10: uploadButton: '<i class="icon-upload icon-white"></i> Click me now and upload a product image'
11: },96)"> 12: template: 13: '<div class="qq-uploader span12">' +
14: '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
15: '<div class="qq-upload-button btn btn-success" style="width: auto;">{uploadButtonText}</div>' +
16: '<span class="qq-drop-processing"><span>{dropProcessingText}</span>'+
17: '<span class="qq-drop-processing-spinner"></span></span>' +
18: '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
19: '</div>',96)"> 20: classes: {
21: success: 'alert alert-success',96)"> 22: fail: 'alert alert-error' 23: },96)"> 24: debug: true
25: }); 26: } 27: 28: window.onload = createUploader; 29: </script> 这是基于Bootstrap实现对Fine Uploader最简单的前端调用.前端一般需要做两件事A:添加Css+Js文件引用.B:在Js中实例化qq.FineUploder对象.运行效果如下: 查看JS构建qq.Fineuploader对象创建过程.首先指定Fine Uploader插件的Dom元素.通过Dom获取操作.request则是对应服务器端实现文件路径.在这建议不要自己构建服务器端处理.而是直接采用官方提供的实现文件修改即可.template则是对应上传文件添加内容模版也可以自己修改.debug是一个布尔值.用来控制是否使用浏览器的控制台打印Fine Uploader的调试信息,默认为false. qq.FineUploader对象还有如下控制参数: validation:该参数一般用来在执行上传文件操作前.在客户端做一些验证.验证操作包含文件格式.文件大小.等添加格式如下: 1: validation:
2: { 3: allowedExtensions: ['jpeg','jpg',128)">'gif',128)">'png'],96)"> 4: sizeLimit: 204800 // 200 kB = 200 * 1024 bytes 5: } allowedExtensions控制上传文件的后缀格式数组. sizeLimit上传文件大小的上限,单位为byte的数值.浏览器不一定支持本设置.也可以在服务器端里设置. minSizeLimit:上传文件大小的下限,单位为byte的数值.同上有些浏览器存在适配问题.建议统一在服务端设置. 另外针对qq.FineUploder对象在执行上传操作整个过程.定义了五个客户端可控做额外操作的事件.可以再callback参数下设置定义: 1: callbacks:
2: { 3: onSubmit: function(id,fileName) {
4: $messages.append('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>'); 5: },96)"> 6: onUpload: 7: $('#file-' + id).addClass('alert-info') 8: .html('<img src="client/loading.gif" alt="Initializing. Please hold."> ' +
9: 'Initializing ' +
10: '“' + fileName + '”'); 11: } 12: } onSubmit事件:文件开始提交.调用参数格式如下:onSubmit: function(id,fileName) {}. onUpload事件: 文件开始上传.调用参数格式如下:onUpload:function(id,sans-serif; font-size:14px"> onProgress事件: 文件正在上传.调用参数格式如下:onProgress: function(id,fileName,loaded,total) {}. onComplete事件: 文件上传成功. 调用参数格式如下:onComplete: function(id,responseJSON) {}. onCancel事件: 取消文件上传.调用参数格式如下:onCancel: function(id,sans-serif; font-size:14px"> 如上五个事件基本覆盖整个上传文件操作中所有过程.完全以开放的形式可以再客户端操作.关于调用如上事件参数说明如下: Id:表示第几个开始上传的文件.Fine Uploder定义是默认从0开始计数. fileName:上传文件的文件名. loaded:表示已经上传到服务器端数据的大小[byte]. total: 需要上传文件的大小. responseJSON: 用来在上传操作完成后返回的Json格式的数据.通过Jquery反序列化出来对象.其中包含一个IsSuccess属性用来判断此次上传是否成功. 如果你想在上传过程向服务器端传递数据.可以通过如下参数控制: params:用来向服务器端传递数据.注意params采用key-value的数组存储.采用Post方式发送给服务器端.一般传递参数格式如下: 1: params:
2: { 3: argument1: "value1",96)"> 4: argument2: "value2" 5: }, ok.这时基本关于Fine Uploader客户端初始化和控制操作选项基本完成.当我们需要上传操作时.如果IsAuto=false时可以通过已经定义qq.FineUploader对象的uploadStoreFiles()方式手工触发上传操作: 1: $('#triggerUpload').click(function() {
2: uploader2.uploadStoredFiles(); 3: }); 如果我们此时点击上传会发现.则提示上传失败. 因为还没有对上传服务器端做任何处理: 1: request:
2: { 3: endpoint: 4: },sans-serif; font-size:14px"> 这时我们需要在EndPoint指定处理文件上传的Php文件[这里是phpdemo].关于服务器端如果你没有已经成熟处理模块.还是推荐你使用官方Server目录上.这里我采用php环境则选中时php.php文件.对应客户端修改如下: |