Extjs formPanel 显示图片 + 上传
弄了一天的图片上传，显示,通过网上找资料终于弄好了。现在整理一下，贴到这，下次要再用到也方便查询了。。。
显示代码打印01 //uploadFile.js
02
03 Ext.onReady(function() {
04
05 var fileForm = new Ext.form.FormPanel({
06 title : "",
07 renderTo : "fileUpload",
08 fileUpload : true,
09 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
显示代码打印001 package com.cocobra.action;
002
003 import java.io.*;
004 import java.util.Date;
005 import java.util.UUID;
006
007 import org.apache.struts2.ServletActionContext;
008
009 import com.opensymphony.xwork2.ActionSupport;
010
011
012 public class UploadAction extends ActionSupport {
013
014 /**
015 *
016 */
017 private static final long serialVersionUID = 1L;
018 private File upload;
019 private String uploadContentType;
020
021 private String uploadFileName; //fileName 前面必須和uplaod一致,不然找不到文件
022
023 public File getUpload() {
024 return upload;
025 }
026
027 public void setUpload(File upload) {
028 this.upload = upload;
029 }
030
031 public String getUploadContentType() {
032 return uploadContentType;
033 }
034
035 public void setUploadContentType(String uploadContentType) {
036 this.uploadContentType = uploadContentType;
037 }
038
039 public String getUploadFileName() {
040 return uploadFileName;
041 }
042
043 public void setUploadFileName(String uploadFileName) {
044 this.uploadFileName = uploadFileName;
045 }
046
047 // 上传文件的文件名
048
049
050 private String getFileExp(String name) {
051 int pos = name.lastIndexOf(".");
052
053 return name.substring(pos);
054 }
055
056 private static final int BUFFER_SIZE = 16 * 1024;
057
058 public String execute() throws Exception{
059
060 Date d = new Date();
061
062 System.out.println("uploadFileName = "+this.uploadFileName);
063
064 //upload -- wapps 下面的文件夹,用来存放图片
065 String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName); //使用時間戳作為文件名
066
067 System.out.println("toFile= "+toSrc);
068
069 File toFile = new File(toSrc);
070
071
072 writeFile(this.upload,toFile);
073
074 return SUCCESS;
075 }
076
077
078 private static void writeFile(File src, File dst) {
079
080 System.out.println(" == 文件寫入 == ");
081 try {
082 InputStream in = null;
083 OutputStream out = null;
084 try {
085
086 in = new BufferedInputStream(new FileInputStream(src),
087 BUFFER_SIZE);
088 out = new BufferedOutputStream(new FileOutputStream(dst),
089 BUFFER_SIZE);
090 byte[] buffer = new byte[BUFFER_SIZE];
091 while (in.read(buffer) > 0) {
092 out.write(buffer);
093 }
094 } finally {
095 if (null != in) {
096 in.close();
097 }
098 if (null != out) {
099 out.close();
100 }
101 }
102 } catch (Exception e) {
103 e.printStackTrace();
104 }
105
106 System.out.println("写入成功！");
107 }
108 }
struts2中的struts.xml 配置
显示代码打印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>
