extjs上传文件模块
- 格式:doc
- 大小:232.00 KB
- 文档页数:12
Ext文件上传
判断,用于上传文本和相片代码如下,把一下代码封装在一个js文件里面
Jscript代码
1. //*****************************************上传的公共js***************************************************************//
2.
3. /**
4.
5. * 约定:types为调用时传来的参数.形式为jsp-gig-png
6.
7. * uploadid为上传后要填充路径的控件id
8.
9. * 上传的属性均为upload
10.
11. * 功能:页面调用openUpload("","");方法即可
12.
13. */
14.
15.//...允许上传的后缀名
16.
17.var types = "";
18.
19.
20.
21.//...上传后填充控件的id
22.
23.var uploadid = "";
24.
25.
26.
27.function openUpload(type,id){
28.
29. types = type;
30.
31. uploadid = id;
32.
33. winUpload.show();
34. 35. }
36.
37.
38.
39.var formUpload = new Ext.form.FormPanel({
40.
41. baseCls: 'x-plain',
42.
43. labelWidth: 80,
44.
45. fileUpload:true,
46.
47. defaultType: 'textfield',
48.
49. items: [{
50.
51. xtype: 'textfield',
52.
53. fieldLabel: '文 件',
54.
55. name: 'upload',
56.
57. inputType: 'file',
58.
59. allowBlank: false,
60.
61. blankText: '请上传文件',
62.
63. anchor: '90%' // anchor width by percentage
64.
65. }]
66.
67. });
68.
69.
70.
71.var winUpload = new Ext.Window({
72.
73. title: '资源上传',
74.
75. width: 400,
76.
77. height:200,
78. 79. minWidth: 300,
80.
81. minHeight: 100,
82.
83. layout: 'fit',
84.
85. plain:true,
86.
87. bodyStyle:'padding:5px;',
88.
89. buttonAlign:'center',
90.
91. items: formUpload,
92.
93. buttons: [{
94.
95. text: '上 传',
96.
97. handler: function() {
98.
99. if(formUpload.form.isValid()){
100.
101. Ext.MessageBox.show({
102.
103. title: 'Please wait',
104.
105. msg: 'Uploading...',
106.
107. progressText: '',
108.
109. width:300,
110.
111. progress:true,
112.
113. closable:false,
114.
115. animEl: 'loding'
116.
117. });
118.
119. formUpload.getForm().submit({
120.
121. url:'uploadAction.action?types='+types,
122. 123. success: function(form, action){
124.
125. var objxzdz = Ext.get(uploadid).dom;
126.
127. var value = action.result.msg;
128.
129. objxzdz.value = value;
130.
131. Ext.Msg.alert('成功','上传成功.');
132.
133. winUpload.hide();
134.
135. },
136.
137. failure: function(form, action){
138.
139. //... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活
140.
141. Ext.Msg.alert('Error', action.result.msg);
142.
143. }
144.
145. })
146.
147. }
148.
149. }
150.
151. },{
152.
153. text: '取 消',
154.
155. handler:function(){winUpload.hide();}
156.
157. }]
158.
159. });
160.
161. //*****************************************上传的公共js***************************************************************//
162. 163. 现在已经封装完毕了,我们看看在页面上如何调用
164. openUpload("txt-xls-doc-docs-pds","xzdzid");
165. 就这一句话,嘿嘿,简单吧?第一个参数为允许上传的类型,第二个参数为上传后地址要绑定到哪个控件(是该控件的id)
166.
167. action的代码还是贴下吧
168.
import java.io.File;169.
170. import java.io.FileInputStream;
171.
172. import java.io.FileOutputStream;
173.
174.
175.
176. import org.apache.struts2.ServletActionContext;
177.
178.
179.
180. import mon;
181.
182. import mon.util.Constants;
183.
184. import mon.util.FileOperate;
185.
186. import mon.util.VeDate;
187.
188.
189.
190. /**
191.
192. * 上传的公共方法
193.
194. *
195.
196. * @author sam.zhang
197.
198. *
199.
200. */
201.
202. public class UploadAction extends ExtJsonActionSuport {
203.
204.
205. 206. /**
207.
208. *
209.
210. */
211.
212. private static final long serialVersionUID = 1L;
213.
214.
215. //和前台的名字一样,这里约定是 upload
216. private File upload;
217.
218.
219.
220. private String uploadContentType;
221.
222.
223.
224. private String uploadFileName;
225.
226.
227.
228. private String savePath;
229.
230.
231.
232. // 存放允许上传的后缀名
233.
234. private String types;
235.
236.
237.
238. public String getSavePath() {
239.
240. return savePath;
241.
242. }
243.
244.
245.
246. public void setSavePath(String savePath) {
247.
248. this.savePath = savePath;
249.