1.
//上传图片类型
2.
var
img_reg = /.([jJ][pP][gG]){1}$|.([jJ][pP][eE][gG]){1}$|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$|.([bB][mM][pP]){1}$/;
3.
4.
var
win_uploadImage =
new
Ext.Window({
5. layout:
'fit'
,
6. width:380,
7. closeAction:
'hide'
,
8. height:380,
9. resizable:
false
,
10. shadow:
false
,
11. modal:
true
,
12. closable:
true
,
13. bodyStyle:
'padding: 5 5 5 5'
,
14. animCollapse:
true
,
15. imageIndexName:
''
,
16. items:[{
17. xtype:
'form'
,
18. id:
'image-upload-form'
,
19. frame:
true
,
20. border:
false
,
21. isAdd:
false
,
22. enctype:
'multipart/form-data'
,
23. fileUpload :
true
,
24. layout :
'form'
,
25. items:[{
26. id :
'file-idx'
,
27. name :
'file'
,
28. inputType :
"file"
,
29. fieldLabel :
'上传图片'
,
30. xtype :
'textfield'
,
31. blankText:
'上传图片不能为空'
,
32. anchor :
'100%'
33. },{
34. xtype :
'box'
,
35. id :
'browseImage'
,
36. fieldLabel :
"预览图片"
,
37. autoEl : {
38. width : 300,
39. height : 300,
40. tag :
'img'
,
41.
// type : 'image',
42. src : Ext.BLANK_IMAGE_URL,
43. style :
'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'
,
44. complete :
'off'
,
45. id :
'imageBrowse'
46. }
47. }
48. ],
49. listeners : {
50.
'render'
:
function
(f) {
51.
//
52.
this
.form.findField(
'file-idx'
).on(
'render'
,
function
() {
53.
//通過change事件,图片也动态跟踪选择的图片变化
54. Ext.get(
'file-idx'
).on(
'change'
,
55.
function
(field, newValue, oldValue) {
56.
//得到选择的图片路径
58.
//alert("url = " + url);
59.
//是否是规定的图片类型
60.
if
(img_reg.test(url)) {
61.
if
(Ext.isIE) {
62.
var
image = Ext.get(
'imageBrowse'
).dom;
63. image.src = Ext.BLANK_IMAGE_URL;
// 覆盖原来的图片
64. image.filters.item(
"DXImageTransform.Microsoft.AlphaImageLoader"
).src = url;
65. }
// 支持FF
66.
else
{
67. Ext.get(
'imageBrowse'
).dom.src = Ext.get(
'file-idx'
).dom.files.item(0).getAsDataURL();
68. }
69. }
70. },
this
);
71. },
this
);
72. }
73. },
74. buttons:[{
75. text:
'关闭'
,
76. handler:
function
(){
77. win_uploadImage.hide();
78. }
79. },{
80. text:
'上传'
,
81. handler:
function
() {
82.
var
furl=
""
;
83. furl = Ext.getCmp(
'image-upload-form'
).form.findField(
'file'
).getValue();
84.
var
type = furl.substring(furl.length - 3).toLowerCase();
85.
if
(furl ==
""
|| furl ==
null
) {
86.
return
;
87. }
88.
if
(type !=
'jpg'
&& type !=
'bmp'
&& type !=
'gif'
&& type !=
'png'
) {
89. alert(
'仅支持jpg、bmp、gif、png格式的图片'
);
90.
return
;
91. }
92.
93. Ext.getCmp(
'image-upload-form'
).form.submit({
94. clienValidation:
true
,
95. waitMsg:
'正在上传请稍候'
,
96. waitTitle:
'提示'
,
97. url:
'upload.do'
,
98. method:
'POST'
,
99. success:
function
(form,action){
100.
var
picName = action.result.data;
101.
if
(win_uploadImage.imageIndexName!=
''
){
102. Ext.getCmp(win_uploadImage.imageIndexName).setValue(picName);
103. }
104.
//reset form
105. Ext.getCmp(
'image-upload-form'
).form.el.dom.reset();
106.
if
(Ext.isIE) {
107.
var
i_image = Ext.get(
'imageBrowse'
).dom;
108. i_image.src = Ext.BLANK_IMAGE_URL;
109. i_image.filters.item(
"DXImageTransform.Microsoft.AlphaImageLoader"
).src = Ext.BLANK_IMAGE_URL;
110. }
else
{
111. Ext.get(
'imageBrowse'
).dom.src = Ext.BLANK_IMAGE_URL;
112. }
113.
114. win_uploadImage.hide();
115. },
116. failure:
function
(form,action){
117. Ext.MessageBox.show({title:
'失败'
,msg:
'上传失败!'
,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
118. }
119. })
120. }
121. }
122. ]
123.}]
124.});
1.
//上传图片类型
2.
var
img_reg = /.([jJ][pP][gG]){1}$|.([jJ][pP][eE][gG]){1}$|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$|.([bB][mM][pP]){1}$/;
3.
4.
var
win_uploadImage =
new
Ext.Window({
5. layout:
'fit'
,
6. width:380,
7. closeAction:
'hide'
,
8. height:380,
9. resizable:
false
,
10. shadow:
false
,
11. modal:
true
,
12. closable:
true
,
13. bodyStyle:
'padding: 5 5 5 5'
,
14. animCollapse:
true
,
15. imageIndexName:
''
,
16. items:[{
17. xtype:
'form'
,
18. id:
'image-upload-form'
,
19. frame:
true
,
20. border:
false
,
21. isAdd:
false
,
22. enctype:
'multipart/form-data'
,
23. fileUpload :
true
,
24. layout :
'form'
,
25. items:[{
26. id :
'file-idx'
,
27. name :
'file'
,
28. inputType :
"file"
,
29. fieldLabel :
'上传图片'
,
30. xtype :
'textfield'
,
31. blankText:
'上传图片不能为空'
,
32. anchor :
'100%'
33. },{
34. xtype :
'box'
,
35. id :
'browseImage'
,
36. fieldLabel :
"预览图片"
,
37. autoEl : {
38. width : 300,
39. height : 300,
40. tag :
'img'
,
41.
// type : 'image',
42. src : Ext.BLANK_IMAGE_URL,
43. style :
'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'
,
44. complete :
'off'
,
45. id :
'imageBrowse'
46. }
47. }
48. ],
49. listeners : {
50.
'render'
:
function
(f) {
51.
//
52.
this
.form.findField(
'file-idx'
).on(
'render'
,
function
() {
53.
//通過change事件,图片也动态跟踪选择的图片变化
54. Ext.get(
'file-idx'
).on(
'change'
,
55.
function
(field, newValue, oldValue) {
56.
//得到选择的图片路径
58.
//alert("url = " + url);
59.
//是否是规定的图片类型
60.
if
(img_reg.test(url)) {
61.
if
(Ext.isIE) {
62.
var
image = Ext.get(
'imageBrowse'
).dom;
63. image.src = Ext.BLANK_IMAGE_URL;
// 覆盖原来的图片
64. image.filters.item(
"DXImageTransform.Microsoft.AlphaImageLoader"
).src = url;
65. }
// 支持FF
66.
else
{
67. Ext.get(
'imageBrowse'
).dom.src = Ext.get(
'file-idx'
).dom.files.item(0).getAsDataURL();
68. }
69. }
70. },
this
);
71. },
this
);
72. }
73. },
74. buttons:[{
75. text:
'关闭'
,
76. handler:
function
(){
77. win_uploadImage.hide();
78. }
79. },{
80. text:
'上传'
,
81. handler:
function
() {
82.
var
furl=
""
;
83. furl = Ext.getCmp(
'image-upload-form'
).form.findField(
'file'
).getValue();
84.
var
type = furl.substring(furl.length - 3).toLowerCase();
85.
if
(furl ==
""
|| furl ==
null
) {
86.
return
;
87. }
88.
if
(type !=
'jpg'
&& type !=
'bmp'
&& type !=
'gif'
&& type !=
'png'
) {
89. alert(
'仅支持jpg、bmp、gif、png格式的图片'
);
90.
return
;
91. }
92.
93. Ext.getCmp(
'image-upload-form'
).form.submit({
94. clienValidation:
true
,
95. waitMsg:
'正在上传请稍候'
,
96. waitTitle:
'提示'
,
97. url:
'upload.do'
,
98. method:
'POST'
,
99. success:
function
(form,action){
100.
var
picName = action.result.data;
101.
if
(win_uploadImage.imageIndexName!=
''
){
102. Ext.getCmp(win_uploadImage.imageIndexName).setValue(picName);
103. }
104.
//reset form
105. Ext.getCmp(
'image-upload-form'
).form.el.dom.reset();
106.
if
(Ext.isIE) {
107.
var
i_image = Ext.get(
'imageBrowse'
).dom;
108. i_image.src = Ext.BLANK_IMAGE_URL;
109. i_image.filters.item(
"DXImageTransform.Microsoft.AlphaImageLoader"
).src = Ext.BLANK_IMAGE_URL;
110. }
else
{
111. Ext.get(
'imageBrowse'
).dom.src = Ext.BLANK_IMAGE_URL;
112. }
113.
114. win_uploadImage.hide();
115. },
116. failure:
function
(form,action){
117. Ext.MessageBox.show({title:
'失败'
,msg:
'上传失败!'
,buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
118. }
119. })
120. }
121. }
122. ]
123.}]
124.});
|
简单实用 直接可以用的图片上传器
最新推荐文章于 2022-11-02 10:19:47 发布