现在的位置: 首页 > 综合 > 正文

Extjs formPanel 显示图片 + 上传

2012年12月13日 ⁄ 综合 ⁄ 共 5359字 ⁄ 字号 评论关闭

弄了一天的图片上传,显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。

 

显示代码打印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>

 

抱歉!评论已关闭.