Extjs 表单 显示图片 + 上传

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

Java代码



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

Java代码



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

Java代码



<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

顶

0

踩