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