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>