Extjs formPanel 显示图片 + 上传

弄了一天的图片上传(也就是在表单里面显示图片,预览图片)，显示,通过网上找资料终于弄好了。现在整理一下，贴到这，下次要再用到也方便查询了。。。

    //uploadFile.js

   Ext.onReady(function() {

	var fileForm = new Ext.form.FormPanel({
		title : "",
		renderTo : "fileUpload",
		fileUpload : true,
		layout : "form",
		id : "fileUploadForm",
		items : [{
					id : 'upload',
					name : 'upload',
					inputType : "file",
					fieldLabel : '上传图片',
					xtype : 'textfield',
					anchor : '40%'

				}, {
					
					xtype : 'box',
					id : 'browseImage',
					fieldLabel : "预览图片",
					autoEl : {
						width : 300,
						height : 350,
						tag : 'img',
						// type : 'image',
						src : Ext.BLANK_IMAGE_URL,
						style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
						complete : 'off',
						id : 'imageBrowse'
					}

				}],
				
				//form事件
		listeners : {
			'render' : function(f) {
				//
				this.form.findField('upload').on('render', function() {
					//通過change事件,图片也动态跟踪选择的图片变化
					Ext.get('upload').on('change',
							function(field, newValue, oldValue) {

								//得到选择的图片路径
								var url = 'file://'
										+ Ext.get('upload').dom.value;
										
							//	alert("url = " + url);
								//是否是规定的图片类型
								if (img_reg.test(url)) {

									if (Ext.isIE) {
										var image = Ext.get('imageBrowse').dom;
										image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
										image.filters
												.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;

									}// 支持FF
									else {
										Ext.get('imageBrowse').dom.src = Ext
												.get('upload').dom.files
												.item(0).getAsDataURL()
									}
								}
							}, this);
				}, this);
			}
		},
		buttons : [{
					text : "提交",
					name : "submit",
					handler : submit
				}]
	});

	// 上传图片类型
	var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/

});

//上傳圖片到服务器，
function submit() {
	Ext.getCmp("fileUploadForm").getForm().submit({

				url : "uploadAction.action",
				method : "POST",
				success : function(form, action) {
					alert("success");
				},
				failure : function(form, action) {
					alert("failure");
				}
			});
}

传入后台处理，使用struts2

package com.cocobra.action;

import java.io.*;
import java.util.Date;
import java.util.UUID;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;


public class UploadAction extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private File upload;
	private String uploadContentType;
	
	private String uploadFileName;   //fileName 前面必須和uplaod一致,不然找不到文件
	
	public File getUpload() {
		return upload;
	}

	public void setUpload(File upload) {
		this.upload = upload;
	}

	public String getUploadContentType() {
		return uploadContentType;
	}

	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}

	public String getUploadFileName() {
		return uploadFileName;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	// 上传文件的文件名
	

	private String getFileExp(String name) {
		int pos = name.lastIndexOf(".");

		return name.substring(pos);
	}
	
	private static final int BUFFER_SIZE = 16 * 1024;
	
	public String execute() throws Exception{
	
		Date d = new Date();
		
		System.out.println("uploadFileName = "+this.uploadFileName);
		
		//upload --  wapps 下面的文件夹,用来存放图片
		String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName);  //使用時間戳作為文件名
	
		System.out.println("toFile= "+toSrc);
		
		File toFile = new File(toSrc);
	
		
		writeFile(this.upload,toFile);
		
		return SUCCESS;
	}


	private static void writeFile(File src, File dst) {
		
		System.out.println(" == 文件寫入 == ");
		try {
			InputStream in = null;
			OutputStream out = null;
			try {
			
				in = new BufferedInputStream(new FileInputStream(src),
						BUFFER_SIZE);
				out = new BufferedOutputStream(new FileOutputStream(dst),
						BUFFER_SIZE);
				byte[] buffer = new byte[BUFFER_SIZE];
				while (in.read(buffer) > 0) {
					out.write(buffer);
				}
			} finally {
				if (null != in) {
					in.close();
				}
				if (null != out) {
					out.close();
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		System.out.println("写入成功！");
}
}

struts2中的struts.xml 配置

   <action name="uploadAction" class="com.cocobra.action.UploadAction" > 
		     <interceptor-ref name="fileUpload"> 
		     <!--拦截器strut2自带的, 指定上传文件的格式,如果不符合规定，将会自动拦截下来 -->
				<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>
				<param name="maximumSize">20000000000</param> 
			</interceptor-ref>
	    	<interceptor-ref name="defaultStack" /> 
	    	<result name ="success" >/index.jsp</result > 
		</action> 

评论

2 楼 谭吉泽 2016-01-13  

你这个测试了么

1 楼 419925094 2011-08-09