做项目的时候遇到这样一个问题，因为我是用ExtJs做的后台管理框架，所以当我使用ExtJs htmleditor 控件
的时候，发现没有图片上传的功能，于是我打算在网上找找有关的文章，居然真有人写过，不过可惜的是，不支持
ExtJs 4.2.1版本，所以我再搜索，终于被我找到了,现在将代码贴出，本着开源精神，我将代码开源，最后我想
感谢一个人：
马平川，cr10210206@163.com
正是他的奉献所以才完成这个功能的，非常感谢！
|
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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
|
Ext.ns(‘zc‘);
/*** 获取项目根路径* */zc.bp = function
() {
var
curWwwPath = window.document.location.href;
var
pathName = window.document.location.pathname;
var
pos = curWwwPath.indexOf(pathName);
var
localhostPath = curWwwPath.substring(0, pos);
var
projectName = pathName.substring(0, pathName.substr(1).indexOf(‘/‘) + 1);
return
(localhostPath + projectName);
};/*** 获取小星星* */zc.getStar = function
() {
return
‘<span style="color:#FF0000;">*</span>‘;
};/*** @Description Html编辑器 插入图片控件* @author 张川(cr10210206@163.com)*/Ext.define(‘Ext.zc.form.HtmlEditorImage‘, {
extend: ‘Ext.util.Observable‘,
alias: ‘widget.zc_form_HtmlEditorImage‘,
langTitle: ‘插入图片‘,
langIconCls: ‘heditImgIcon‘,
init: function
(view) {
var
scope = this;
view.on(‘render‘, function
() {
scope.onRender(view);
});
},
/**
* 添加"插入图片"按钮
* */
onRender: function
(view) {
var
scope = this;
view.getToolbar().add({
iconCls: scope.langIconCls,
tooltip: {
title: scope.langTitle,
width: 60
},
handler: function
() {
scope.showImgWindow(view);
}
});
},
/**
* 显示"插入图片"窗体
* */
showImgWindow: function
(view) {
var
scope = this;
Ext.create(‘Ext.window.Window‘, {
width: 400,
height: 305,
title: scope.langTitle,
layout: ‘fit‘,
autoShow: true,
modal: true,
resizable: false,
maximizable: false,
constrain: true,
plain: true,
enableTabScroll: true,
//bodyPadding: ‘1 1 1 1‘,
border: false,
items: [{
xtype: ‘tabpanel‘,
enableTabScroll: true,
bodyPadding: ‘1 1 1 1‘,
items: [{
title: ‘上传本地图片‘,
items: [{
xtype: ‘form‘,
layout: ‘column‘,
autoScroll: true,
border: false,
defaults: {
columnWidth: 1,
labelWidth: 70,
labelAlign: ‘right‘,
padding: ‘5 5 5 5‘,
allowBlank: false
},
items: [{
xtype: ‘fileuploadfield‘,
fieldLabel: ‘选择文件‘,
beforeLabelTextTpl: zc.getStar(),
buttonText: ‘请选择...‘,
name: ‘upload‘,
emptyText: ‘请选择图片‘,
blankText: ‘图片不能为空‘,
listeners: {
change: function
(view, value, eOpts) {
scope.uploadImgCheck(view, value);
}
}
}, {
xtype: ‘fieldcontainer‘,
fieldLabel: ‘图片大小‘,
layout: ‘hbox‘,
defaultType: ‘numberfield‘,
defaults: {
flex: 1,
labelWidth: 20,
labelAlign: ‘right‘,
allowBlank: true
},
items: [{
fieldLabel: ‘宽‘,
name: ‘width‘,
minValue: 1
}, {
fieldLabel: ‘高‘,
name: ‘height‘,
minValue: 1
}]
}, {
xtype: ‘textfield‘,
fieldLabel: ‘图片说明‘,
name: ‘content‘,
allowBlank: true,
maxLength: 100,
emptyText: ‘简短的图片说明‘
}, {
columnWidth: 1,
xtype: ‘fieldset‘,
title: ‘上传须知‘,
layout: {
type: ‘table‘,
columns: 1
},
collapsible: false, //是否可折叠
defaultType: ‘label‘, //默认的Form表单组件
items: [{
html: ‘1.上传图片不超过100KB‘
}, {
html: ‘2.为了保证图片能正常使用，我们支持以下格式的图片上传‘
}, {
html: ‘ jpg,jpeg,png,gif‘
}]
}],
buttons: [{
text: ‘保存‘,
action: ‘btn_save‘,
icon: ‘../../../Images/extjs/disk.png‘,
handler: function
(btn) {
scope.saveUploadImg(btn, view);
}
}, {
text: ‘取消‘,
icon: ‘../../../Images/extjs/cross.png‘,
handler: function
(btn) {
btn.up(‘window‘).close();
}
}]
}]
}, {
title: ‘链接网络图片‘,
items: [{
xtype: ‘form‘,
layout: ‘column‘,
autoScroll: true,
border: false,
defaults: {
columnWidth: 1,
labelWidth: 70,
labelAlign: ‘right‘,
padding: ‘5 5 5 5‘,
allowBlank: false
},
items: [{
xtype: ‘textfield‘,
fieldLabel: ‘图片地址‘,
beforeLabelTextTpl: zc.getStar(),
name: ‘url‘,
emptyText: ‘请填入支持外链的长期有效的图片URL‘,
blankText: ‘图片地址不能为空‘,
vtype: ‘remoteUrl‘
}, {
xtype: ‘fieldcontainer‘,
fieldLabel: ‘图片大小‘,
layout: ‘hbox‘,
defaultType: ‘numberfield‘,
defaults: {
flex: 1,
labelWidth: 20,
labelAlign: ‘right‘,
allowBlank: true
},
items: [{
fieldLabel: ‘宽‘,
name: ‘width‘,
minValue: 1
}, {
fieldLabel: ‘高‘,
name: ‘height‘,
minValue: 1
}]
}, {
xtype: ‘textfield‘,
fieldLabel: ‘图片说明‘,
name: ‘content‘,
allowBlank: true,
maxLength: 100,
emptyText: ‘简短的图片说明‘
}, {
columnWidth: 1,
xtype: ‘fieldset‘,
title: ‘上传须知‘,
layout: {
type: ‘table‘,
columns: 1
},
collapsible: false, //是否可折叠
defaultType: ‘label‘, //默认的Form表单组件
items: [{
html: ‘1.上传图片不超过100KB‘
}, {
html: ‘2.为了保证图片能正常使用，我们支持以下格式的图片上传‘
}, {
html: ‘ jpg,jpeg,png,gif‘
}]
}],
buttons: [{
text: ‘保存‘,
action: ‘btn_save‘,
icon: ‘../../../Images/extjs/disk.png‘,
handler: function
(btn) {
scope.saveRemoteImg(btn, view);
}
}, {
text: ‘取消‘,
icon: ‘../../../Images/extjs/cross.png‘,
handler: function
(btn) {
btn.up(‘window‘).close();
}
}]
}]
}]
}]
});
},
/**
* 上传图片验证
**/
uploadImgCheck: function
(fileObj, fileName) {
var
scope = this;
//图片类型验证
if
(!(scope.getImgTypeCheck(scope.getImgHZ(fileName)))) {
Ext.MessageBox.alert(‘温馨提示‘, ‘上传图片类型有误‘);
fileObj.reset(); //清空上传内容
return;
}
},
/**
* 获取图片后缀(小写)
* */
getImgHZ: function
(imgName) {
//后缀
var
hz = ‘‘;
//图片名称中最后一个.的位置
var
index = imgName.lastIndexOf(‘.‘);
if
(index != -1) {
//后缀转成小写
hz = imgName.substr(index + 1).toLowerCase();
}
return
hz;
},
/**
* 图片类型验证
* */
getImgTypeCheck: function
(hz) {
var
typestr = ‘jpg,jpeg,png,gif‘;
var
types = typestr.split(‘,‘); //图片类型
for
(var
i = 0; i < types.length; i++) {
if
(hz == types[i]) {
return
true;
}
}
return
false;
},
/**
* 上传图片
* */
saveUploadImg: function
(btn, view) {
var
scope = this;
var
windowObj = btn.up(‘window‘); //获取Window对象
var
formObj = btn.up(‘form‘); //获取Form对象
if
(formObj.isValid()) { //验证Form表单
formObj.form.doAction(‘submit‘, {
url: zc.bp() + ‘/‘,
method: ‘POST‘,
submitEmptyText: false,
waitMsg: ‘正在上传图片,请稍候...‘,
timeout: 60000, // 60s
success: function
(response, options) {
var
result = options.result;
if
(!result.success) {
Ext.MessageBox.alert(‘温馨提示‘, result.msg);
return;
}
scope.insertImg(view, result.data);
windowObj.close(); //关闭窗体
},
failure: function
(response, options) {
Ext.MessageBox.alert(‘温馨提示‘, options.result.msg);
}
});
}
},
/**
* 保存远程的图片
* */
saveRemoteImg: function
(btn, view) {
var
scope = this;
var
windowObj = btn.up(‘window‘); //获取Window对象
var
formObj = btn.up(‘form‘); //获取Form对象
if
(formObj.isValid()) {//验证Form表单
var
values = formObj.getValues(); //获取Form表单的值
scope.insertImg(view, values);
windowObj.close(); //关闭窗体
}
},
/**
* 插入图片
* */
insertImg: function
(view, data) {
var
url = data.url;
var
content = data.content;
var
width = data.width;
var
height = data.height;
var
str = ‘<img src="‘
+ url + ‘" border="0" ‘;
if
(content != undefined && content != null
&& content != ‘‘) {
str += ‘ title="‘
+ content + ‘" ‘;
}
if
(width != undefined && width != null
&& width != 0) {
str += ‘ width="‘
+ width + ‘" ‘;
}
if
(height != undefined && height != null
&& height != 0) {
str += ‘ height="‘
+ height + ‘" ‘;
}
str += ‘ />‘;
view.insertAtCursor(str);
}
}); |
像这样引用：
|
1
2
3
4
5
6
7
8
9
10
|
{ xtype: ‘htmleditor‘,
border: true,
id: ‘context‘,
plugins: [
Ext.create(‘Ext.zc.form.HtmlEditorImage‘)
],
height: 400,
anchor: ‘100%‘
}
|
总结：
最后，就是将你上传的图片保存在服务器上，所以在“saveRemoteImg()”方法里的ajax提交的url
你们可以自行发挥想保存在哪，这个我就不多说了。