《thinkjs与FineUploader的邂逅.docx》由会员分享，可在线阅读，更多相关《thinkjs与FineUploader的邂逅.docx（12页珍藏版）》请在三一文库上搜索。
1、thinkjs与Fine Uploader的邂逅 最近在做一个内部系统，需要一个无刷新的上传功能，找了许久，发现了一个好用的上传工具-Fine Uploader，网上也有不少关于它的介绍，对我有不少的启发，结合我的使用场景简单的介绍一下它与thinkjs完美配合。 首先就是使用thinkjs快速搭建一个web应用，可以参考之前写的一个thinkjs初试。 访问127.0.0.1:8360查看应用是否正常启动，如果一切正常就可以开始创建前端页面和服务端处理上传的逻辑的页面了。 修改/App/Lib/Controller/Home/IndexController.js内容为：12345678910
2、11121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768/* controller* return*/module.exports = Controller(Home/BaseController,function()use strict;returnindexAction:function()this.display();,uploadFileAction:function() varself =this;varfil
3、eInfo =this.file(qqfile);/http:/www.thinkjs.org/doc/http.html#上传的文件/*/fileInfo的值fieldName: qqfile,originalFilename: 1.jpg,path: /home/maoshuai/htdocs/mtyras/App/Runtime/Temp/23886-1c2xozp.jpg,headers: content-disposition: form-data; name=qqfile; filename=1.jpg,content-type: image/jpeg ,ws: _writable
4、State: highWaterMark: 16384,objectMode: false,needDrain: false,ending: true,ended: true,finished: true,decodeStrings: true,defaultEncoding: utf8,length: 0,writing: false,sync: false,bufferProcessing: false,onwrite: Function,writecb: null,writelen: 0,buffer: ,errorEmitted: false ,writable: true,domai
5、n: null,_events: error: Object, close: Object ,_maxListeners: 10,path: /home/maoshuai/htdocs/mtyras/App/Runtime/Temp/23886-1c2xozp.jpg,fd: null,flags: w,mode: 438,start: undefined,pos: undefined,bytesWritten: 28618,closed: true ,size: 28618*/if(fileInfo) self.json(error: 0,errmsg:ok,success:true/只有s
6、uccess返回true才认为上传成功);elseself.error();); 修改/App/View/Home/index_index.html内容为：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697Fine Uploader与thinkjs的邂逅拖拽上传区域选择文件上传进
7、度取消重试删除上传按钮/具体参数参考源码qq.FineUploaderBasic中的_options查看var uploader = new qq.FineUploader(element: document.getElementById(fine-uploader-wrapper), /上传按钮request: endpoint: test/uploadFile /上传接口地址,multiple: false, /是否多个文件autoUpload: false, /是否支持上传validation: allowedExtensions: jpeg, jpg, png, /上传文件约束条件si
8、zeLimit: 2048000 /bytes 2000KB,callbacks: onSubmit: function(id, fileName) /文件开始提交console.log(fileName,文件开始提交);,onUpload: function(id, fileName) /文件开始上传console.log(fileName,文件开始提交);,onProgress: function(id, fileName, loaded, total) /文件正在上传console.log(fileName,已上传+(loaded/total)*100+%);,onComplete: f
9、unction(id, fileName, responseJSON) /文件上传成功console.log(fileName,上传成功，返回信息为：,responseJSON);,onCancel: function(id, fileName) /取消文件上传console.log(取消,fileName,上传);,messages: noFilesError: 没有选中文件,text: formatProgress: percent% of total_size,failUpload: 上传失败,waitingForResponse: 上传中.,paused: 暂停,template: f
10、ine-uploader-wrapper, /IDdebug: true);document.getElementById(upload-btn).onclick = function() uploader.uploadStoredFiles(); 下面对服务端代码和前端页面进行详细的说明： 服务端IndexController.js indexAction对应的页面是index_index.html，uploadFileAction对应的是前端页面的上传图片的接口，其中注释部分是通过thinkjs获取的文件信息，例子是直接返回了，使用的时候可以根据自己的情况，对上传的数据进行条件判断，然后做
11、出相应的处理。这里需要注意的是：Fine Uploader返回的信息中必须包含success字段，并且只有在success=true的时候，才认为是上传成功，才会改变前端页面的展示。而thinkjs的this.success()函数不能传success参数，所以说使用了this.json()来实现。 前端index_index.html 页面没有要说的，主要介绍一下Fine Uploader的使用吧。 它主要两种主要形式，一种是原生JS实现，一种是jquery插件形式，两种的使用方式分别如下：12$(dom).fineUploader(conf);newqq.FineUploader(conf
12、); 接下来说一下conf可以配置什么信息，查看源码可以发现这个默认配置： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231
13、24125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215this._options = debug:fal
14、se,button:null,multiple:true,maxConnections: 3,disableCancelForFormUploads:false,autoUpload:true,request: endpoint:/server/upload,params: ,paramsInBody:true,customHeaders: ,forceMultipart:true,inputName:qqfile,uuidName:qquuid,totalFileSizeName:qqtotalfilesize,filenameParam:qqfilename,validation: all
15、owedExtensions: ,sizeLimit: 0,minSizeLimit: 0,itemLimit: 0,stopOnFirstInvalidFile:true,acceptFiles:null,image: maxHeight: 0,maxWidth: 0,minHeight: 0,minWidth: 0,callbacks: onSubmit:function(id, name) ,onSubmitted:function(id, name) ,onComplete:function(id, name, responseJSON, maybeXhr) ,onAllComplet
16、e:function(successful, failed) ,onCancel:function(id, name) ,onUpload:function(id, name) ,onUploadChunk:function(id, name, chunkData) ,onUploadChunkSuccess:function(id, chunkData, responseJSON, xhr) ,onResume:function(id, fileName, chunkData) ,onProgress:function(id, name, loaded, total) ,onTotalPro
17、gress:function(loaded, total) ,onError:function(id, name, reason, maybeXhrOrXdr) ,onAutoRetry:function(id, name, attemptNumber) ,onManualRetry:function(id, name) ,onValidateBatch:function(fileOrBlobData) ,onValidate:function(fileOrBlobData) ,onSubmitDelete:function(id) ,onDelete:function(id) ,onDele
18、teComplete:function(id, xhrOrXdr, isError) ,onPasteReceived:function(blob) ,onStatusChange:function(id, oldStatus, newStatus) ,onSessionRequestComplete:function(response, success, xhrOrXdr) ,messages: typeError:file has an invalid extension. Valid extension(s): extensions.,sizeError:file is too larg
19、e, maximum file size is sizeLimit.,minSizeError:file is too small, minimum file size is minSizeLimit.,emptyError:file is empty, please select files again without it.,noFilesError:No files to upload.,tooManyItemsError:Too many items (netItems) would be uploaded. Item limit is itemLimit.,maxHeightImag
20、eError:Image is too tall.,maxWidthImageError:Image is too wide.,minHeightImageError:Image is not tall enough.,minWidthImageError:Image is not wide enough.,retryFailTooManyItems:Retry failed - you have reached your file limit.,onLeave:The files are being uploaded, if you leave now the upload will be
21、canceled.,unsupportedBrowserIos8Safari:Unrecoverable error - this browser does not permit file uploading of any kind due to serious bugs in iOS8 Safari. Please use iOS8 Chrome until Apple fixes these issues.,retry: enableAuto:false,maxAutoAttempts: 3,autoAttemptDelay: 5,preventRetryResponseProperty:
22、preventRetry,classes: buttonHover:qq-upload-button-hover,buttonFocus:qq-upload-button-focus,chunking: enabled:false,concurrent: enabled:false,mandatory:false,paramNames: partIndex:qqpartindex,partByteOffset:qqpartbyteoffset,chunkSize:qqchunksize,totalFileSize:qqtotalfilesize,totalParts:qqtotalparts,
23、partSize: 2000000,/ only relevant for traditional endpoints, only required when concurrent.enabled = truesuccess: endpoint:null,resume: enabled:false,recordsExpireIn: 7,/daysparamNames: resuming:qqresume,formatFileName:function(fileOrBlobName) if(fileOrBlobName != undefined & fileOrBlobName.length 3
24、3) fileOrBlobName = fileOrBlobName.slice(0, 19) +.+ fileOrBlobName.slice(-14);returnfileOrBlobName;,text: defaultResponseError:Upload failure reason unknown,sizeSymbols: kB,MB,GB,TB,PB,EB,deleteFile: enabled:false,method:DELETE,endpoint:/server/upload,customHeaders: ,params: ,cors: expected:false,sendCredentials:false,allowXdr:false,blobs: defaultName:misc_data,paste: targetElement:null,defaultName:pasted_image,camera: ios:false,/ if ios is true: butto