Extjs 实现文件上传

弄了N久，终于成功了。

必须设置 <interceptor-ref name="fileUploadStack"></interceptor-ref>

 

[html] view plaincopy

1. <action name="uploadfile"  class="org.lib.main.action.UploadAction">  
2.     <interceptor-ref name="fileUploadStack"></interceptor-ref>    
3.     <result type="json">  
4.         <param name="contentType">text/html</param>  
5.         <param name="includeProperties">success,resultMsg</param>         
6.     </result>  
7. </action>  

 

 

[javascript] view plaincopy

1. Ext.onReady(function(){  
2.     Ext.QuickTips.init();  
3.     var uploadForm = Ext.create('Ext.form.Panel',{  
4.         title:'Ext.form.field.File示例',  
5.         bodyStyle:'padding:5 5 5 5',//表单边距  
6.         frame : true,  
7.         height:100,  
8.         width:300,  
9.         fileUpload : true,    
10.         renderTo :'form',  
11.         defaults:{//统一设置表单字段默认属性  
12.             labelSeparator :'：',//分隔符  
13.             labelWidth : 50,//标签宽度  
14.             width : 150,//字段宽度  
15.             allowBlank : false,//是否允许为空  
16.             labelAlign : 'left',//标签对齐方式  
17.             msgTarget :'side'   //在字段的右边显示一个提示信息  
18.         },  
19.         items:[{  
20.             xtype: 'filefield',  
21.             name: 'upload',  
22.             fieldLabel: '照片',  
23.             anchor: '100%',  
24.             buttonText: '选择照片...'  
25.         }],  
26.         buttons: [{  
27.             text: '上传文件',  
28.             handler: function() {  
29.                 var form = uploadForm.getForm();  
30.                 if(form.isValid()){  
31.                     form.submit({  
32.                         url: 'uploadfile',  
33.                         waitMsg: '正在上传照片文件请稍候...',  
34.                         success: function(fp, o) {  
35.                             Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');  
36.                         },  
37.                         failure : function (fp,o){    
38.                             Ext.Msg.alert('上传失败!',o.result.resultMsg);      
39.                            },   
40.                     });  
41.                 }  
42.             }  
43.         }]  
44.     });  
45. });  

 

[html] view plaincopy

1. package org.lib.main.action;  
2. //package com.jfok;  
3.   
4. import java.io.File;  
5. import java.io.FileInputStream;  
6. import java.io.FileOutputStream;  
7. import java.io.UnsupportedEncodingException;  
8. import com.opensymphony.xwork2.ActionSupport;  
9.   
10. public class UploadAction extends ActionSupport {  
11.     private static final long serialVersionUID = 1L;  
12.     private File upload;        //上传的文件，在extjs 中对应 xtype:'fileuploadfield',  name:'upload'  
13.     private String fileName;    //上传的文件名  
14.     private String uploadContentType; //限制上传的后缀名  
15.     private String caption;     //form中其他的上传的字段  
16.     private Boolean success = true; //json中返回的结果  
17.     private String resultMsg = "ok" ;  //上传失败后，返回的错误结果  
18.       
19.     public File getUpload() {  
20.         return upload;  
21.     }  
22.     public void setUpload(File upload) {  
23.         this.upload = upload;  
24.         System.out.println("上传到tomcat中的临时文件名：" + upload.getPath());  
25.     }  
26.     public String getUploadFileName() {  
27.         return fileName;  
28.     }  
29.     public void setUploadFileName(String fileName) throws UnsupportedEncodingException {  
30.         System.out.println("上传的文件名：" +fileName);  
31.         this.fileName = fileName;  
32.     }  
33.     public  String getUploadContentType() {  
34.         return uploadContentType;  
35.     }  
36.     public  void setUploadContentType(String uploadContentType) {  
37.         this.uploadContentType = uploadContentType;  
38.     }  
39.       
40.     public String execute() throws Exception{  
41.      try { //此处为最简单的文件拷贝方法  
42.         java.io.InputStream is = new FileInputStream(upload);  
43.         java.io.OutputStream os = new FileOutputStream("d:/"+fileName);//上传到d盘根目录  
44.         byte buffer[] = new byte[8192];  
45.         int count = 0;  
46.         while ((count = is.read(buffer)) > 0)  
47.             os.write(buffer, 0, count);  
48.         os.close();  
49.         is.close();  
50.      } catch (Exception e)  
51.      {  
52.          resultMsg = "上传文件失败，文件太大或没有选择上传的文件 ";  
53.          System.out.println(resultMsg);  
54.          success = false;  
55.      }  
56.      //此处会根据 success 和 resultMsg 返回 json  
57.      //{"resultMsg":"ok","success":true}  
58.     return SUCCESS;  
59.           
60.     }  
61.     public void setCaption(String caption) {  
62.         System.out.println("接收到的caption：" + caption );  
63.         this.caption = caption;  
64.     }  
65.     public String getCaption() {  
66.         return caption;  
67.     }  
68.     public Boolean getSuccess() {  
69.         return success;  
70.     }  
71.     public String getResultMsg() {  
72.         return resultMsg;  
73.     }  
74. }