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 } 

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 upload