Extjs 表单 显示图片 + 上传

弄了一天的图片上传(也就是在表单里面显示图片,预览图片)，显示,通过网上找资料终于弄好了。现在整理一下，贴到这，下次要再用到也方便查询了。。。 

Java代码  

1.     //uploadFile.js  
2.   
3.    Ext.onReady(function() {  
4.   
5.     var fileForm = new Ext.form.FormPanel({  
6.         title : "",  
7.         renderTo : "fileUpload",  
8.         fileUpload : true,  
9.         layout : "form",  
10.         id : "fileUploadForm",  
11.         items : [{  
12.                     id : 'upload',  
13.                     name : 'upload',  
14.                     inputType : "file",  
15.                     fieldLabel : '上传图片',  
16.                     xtype : 'textfield',  
17.                     anchor : '40%'  
18.   
19.                 }, {  
20.                       
21.                     xtype : 'box',  
22.                     id : 'browseImage',  
23.                     fieldLabel : "预览图片",  
24.                     autoEl : {  
25.                         width : 300,  
26.                         height : 350,  
27.                         tag : 'img',  
28.                         // type : 'image',  
29.                         src : Ext.BLANK_IMAGE_URL,  
30.                         style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',  
31.                         complete : 'off',  
32.                         id : 'imageBrowse'  
33.                     }  
34.   
35.                 }],  
36.                   
37.                 //form事件  
38.         listeners : {  
39.             'render' : function(f) {  
40.                 //  
41.                 this.form.findField('upload').on('render', function() {  
42.                     //通過change事件,图片也动态跟踪选择的图片变化  
43.                     Ext.get('upload').on('change',  
44.                             function(field, newValue, oldValue) {  
45.   
46.                                 //得到选择的图片路径  
47.                                 var url = 'file://'  
48.                                         + Ext.get('upload').dom.value;  
49.                                           
50.                             //  alert("url = " + url);  
51.                                 //是否是规定的图片类型  
52.                                 if (img_reg.test(url)) {  
53.   
54.                                     if (Ext.isIE) {  
55.                                         var image = Ext.get('imageBrowse').dom;  
56.                                         image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片  
57.                                         image.filters  
58.                                                 .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;  
59.   
60.                                     }// 支持FF  
61.                                     else {  
62.                                         Ext.get('imageBrowse').dom.src = Ext  
63.                                                 .get('upload').dom.files  
64.                                                 .item(0).getAsDataURL()  
65.                                     }  
66.                                 }  
67.                             }, this);  
68.                 }, this);  
69.             }  
70.         },  
71.         buttons : [{  
72.                     text : "提交",  
73.                     name : "submit",  
74.                     handler : submit  
75.                 }]  
76.     });  
77.   
78.     // 上传图片类型  
79.     var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/  
80.   
81. });  
82.   
83. //上傳圖片到服务器，  
84. function submit() {  
85.     Ext.getCmp("fileUploadForm").getForm().submit({  
86.   
87.                 url : "uploadAction.action",  
88.                 method : "POST",  
89.                 success : function(form, action) {  
90.                     alert("success");  
91.                 },  
92.                 failure : function(form, action) {  
93.                     alert("failure");  
94.                 }  
95.             });  
96. }  

传入后台处理，使用struts2 

Java代码  

1. package com.cocobra.action;  
2.   
3. import java.io.*;  
4. import java.util.Date;  
5. import java.util.UUID;  
6.   
7. import org.apache.struts2.ServletActionContext;  
8.   
9. import com.opensymphony.xwork2.ActionSupport;  
10.   
11.   
12. public class UploadAction extends ActionSupport {  
13.   
14.     /** 
15.      *  
16.      */  
17.     private static final long serialVersionUID = 1L;  
18.     private File upload;  
19.     private String uploadContentType;  
20.       
21.     private String uploadFileName;   //fileName 前面必須和uplaod一致,不然找不到文件  
22.       
23.     public File getUpload() {  
24.         return upload;  
25.     }  
26.   
27.     public void setUpload(File upload) {  
28.         this.upload = upload;  
29.     }  
30.   
31.     public String getUploadContentType() {  
32.         return uploadContentType;  
33.     }  
34.   
35.     public void setUploadContentType(String uploadContentType) {  
36.         this.uploadContentType = uploadContentType;  
37.     }  
38.   
39.     public String getUploadFileName() {  
40.         return uploadFileName;  
41.     }  
42.   
43.     public void setUploadFileName(String uploadFileName) {  
44.         this.uploadFileName = uploadFileName;  
45.     }  
46.   
47.     // 上传文件的文件名  
48.       
49.   
50.     private String getFileExp(String name) {  
51.         int pos = name.lastIndexOf(".");  
52.   
53.         return name.substring(pos);  
54.     }  
55.       
56.     private static final int BUFFER_SIZE = 16 * 1024;  
57.       
58.     public String execute() throws Exception{  
59.       
60.         Date d = new Date();  
61.           
62.         System.out.println("uploadFileName = "+this.uploadFileName);  
63.           
64.         //upload --  wapps 下面的文件夹,用来存放图片  
65.         String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName);  //使用時間戳作為文件名  
66.       
67.         System.out.println("toFile= "+toSrc);  
68.           
69.         File toFile = new File(toSrc);  
70.       
71.           
72.         writeFile(this.upload,toFile);  
73.           
74.         return SUCCESS;  
75.     }  
76.   
77.   
78.     private static void writeFile(File src, File dst) {  
79.           
80.         System.out.println(" == 文件寫入 == ");  
81.         try {  
82.             InputStream in = null;  
83.             OutputStream out = null;  
84.             try {  
85.               
86.                 in = new BufferedInputStream(new FileInputStream(src),  
87.                         BUFFER_SIZE);  
88.                 out = new BufferedOutputStream(new FileOutputStream(dst),  
89.                         BUFFER_SIZE);  
90.                 byte[] buffer = new byte[BUFFER_SIZE];  
91.                 while (in.read(buffer) > 0) {  
92.                     out.write(buffer);  
93.                 }  
94.             } finally {  
95.                 if (null != in) {  
96.                     in.close();  
97.                 }  
98.                 if (null != out) {  
99.                     out.close();  
100.                 }  
101.             }  
102.         } catch (Exception e) {  
103.             e.printStackTrace();  
104.         }  
105.           
106.         System.out.println("写入成功！");  
107. }  
108. }  

struts2中的struts.xml 配置 

Java代码  

1.  <action name="uploadAction" class="com.cocobra.action.UploadAction" >   
2.      <interceptor-ref name="fileUpload">   
3.      <!--拦截器strut2自带的, 指定上传文件的格式,如果不符合规定，将会自动拦截下来 -->  
4.         <param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>  
5.         <param name="maximumSize">20000000000</param>   
6.     </interceptor-ref>  
7.     <interceptor-ref name="defaultStack" />   
8.     <result name ="success" >/index.jsp</result >   
9. </action>   

2 
顶

0 
踩