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