Extjs formPanel 显示图片 + 上传[转载]

 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 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> 


[转载]http://dev.firnow.com/course/4_webprogram/jsp/jsp_js/20100721/478246.html