当前位置：
首页 > 表格模板 > 合同协议 > thinkjs与Fine Uploader的邂逅.docx
thinkjs与Fine Uploader的邂逅.docx
- 文档编号：11204812
- 上传时间：2023-05-29
- 格式：DOCX
- 页数：19
- 大小：22.17KB
thinkjs与Fine Uploader的邂逅.docx
《thinkjs与Fine Uploader的邂逅.docx》由会员分享，可在线阅读，更多相关《thinkjs与Fine Uploader的邂逅.docx（19页珍藏版）》请在冰点文库上搜索。
thinkjs与FineUploader的邂逅
thinkjs与FineUploader的邂逅
最近在做一个内部系统，需要一个无刷新的上传功能，找了许久，发现了一个好用的上传工具-FineUploader，网上也有不少关于它的介绍，对我有不少的启发，结合我的使用场景简单的介绍一下它与thinkjs完美配合。
首先就是使用thinkjs快速搭建一个web应用，可以参考之前写的一个thinkjs初试。
访问127.0.0.1:
8360查看应用是否正常启动，如果一切正常就可以开始创建前端页面和服务端处理上传的逻辑的页面了。
修改/App/Lib/Controller/Home/IndexController.js内容为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/**
*controller
*@return
*/
module.exports=Controller（"Home/BaseController", function（）{
"usestrict";
return {
indexAction:
function（）{
this.display（）;
},
uploadFileAction:
function（）{
var self= this;
var fileInfo= 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:
{_writableState:
{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,
domain:
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 //只有success返回true才认为上传成功
}）;
}else {
self.error（）;
}
}
};
}）;
修改/App/View/Home/index_index.html内容为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
DOCTYPE html>
FineUploader与thinkjs的邂逅
拖拽上传区域
选择文件
上传进度
取消
重试
删除
上传按钮
//具体参数参考源码qq.FineUploaderBasic中的_options查看
varuploader=newqq.FineUploader（{
element:
document.getElementById（"fine-uploader-wrapper"）,//上传按钮
request:
{
endpoint:
'test/uploadFile'//上传接口地址
},
multiple:
false,//是否多个文件
autoUpload:
false,//是否支持上传
validation:
{
allowedExtensions:
['jpeg','jpg','png'],//上传文件约束条件
sizeLimit:
2048000//bytes2000KB
},
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:
function（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:
'fine-uploader-wrapper',//ID
debug:
true
}）;
document.getElementById（'upload-btn'）.onclick=function（）{
uploader.uploadStoredFiles（）;
}
下面对服务端代码和前端页面进行详细的说明：
服务端IndexController.js
indexAction对应的页面是index_index.html，uploadFileAction对应的是前端页面的上传图片的接口，其中注释部分是通过thinkjs获取的文件信息，例子是直接返回了，使用的时候可以根据自己的情况，对上传的数据进行条件判断，然后做出相应的处理。
这里需要注意的是：
FineUploader返回的信息中必须包含success字段，并且只有在success=true的时候，才认为是上传成功，才会改变前端页面的展示。
而thinkjs的this.success（）函数不能传success参数，所以说使用了this.json（）来实现。
前端index_index.html
页面没有要说的，主要介绍一下FineUploader的使用吧。
它主要两种主要形式，一种是原生JS实现，一种是jquery插件形式，两种的使用方式分别如下：
1
2
$（dom）.fineUploader（conf）;
new qq.FineUploader（conf）;
接下来说一下conf可以配置什么信息，查看源码可以发现这个默认配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
this._options={
debug:
false,
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:
{
allowedExtensions:
[],
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）{},
onAllComplete:
function（successful,failed）{},
onCancel:
function（id,name）{},
onUpload:
function（id,name）{},
onUploadChunk:
function（id,name,chunkData）{},
onUploadChunkSuccess:
function（id,chunk
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
thinkjs与Fine
Uploader的邂逅
thinkjs
Fine
Uploader
邂逅
冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
《大侦探小卡莱》读后感.docx
