Extjs 表单 显示图片 + 上传

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

//uploadFile.js

Ext.onReady(function(){

varfileForm=newExt.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){

//得到选择的图片路径
varurl='file://'
+Ext.get('upload').dom.value;

//alert("url="+url);
//是否是规定的图片类型
if(img_reg.test(url)){

if(Ext.isIE){
varimage=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
}]
});

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

});

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

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

传入后台处理，使用struts2

packagecom.cocobra.action;

importjava.io.*;
importjava.util.Date;
importjava.util.UUID;

importorg.apache.struts2.ServletActionContext;

importcom.opensymphony.xwork2.ActionSupport;


publicclassUploadActionextendsActionSupport{

/**
*
*/
privatestaticfinallongserialVersionUID=1L;
privateFileupload;
privateStringuploadContentType;

privateStringuploadFileName;//fileName前面必須和uplaod一致,不然找不到文件

publicFilegetUpload(){
returnupload;
}

publicvoidsetUpload(Fileupload){
this.upload=upload;
}

publicStringgetUploadContentType(){
returnuploadContentType;
}

publicvoidsetUploadContentType(StringuploadContentType){
this.uploadContentType=uploadContentType;
}

publicStringgetUploadFileName(){
returnuploadFileName;
}

publicvoidsetUploadFileName(StringuploadFileName){
this.uploadFileName=uploadFileName;
}

//上传文件的文件名


privateStringgetFileExp(Stringname){
intpos=name.lastIndexOf(".");

returnname.substring(pos);
}

privatestaticfinalintBUFFER_SIZE=16*1024;

publicStringexecute()throwsException{

Dated=newDate();

System.out.println("uploadFileName="+this.uploadFileName);

//upload--wapps下面的文件夹,用来存放图片
StringtoSrc=ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName);//使用時間戳作為文件名

System.out.println("toFile="+toSrc);

FiletoFile=newFile(toSrc);


writeFile(this.upload,toFile);

returnSUCCESS;
}


privatestaticvoidwriteFile(Filesrc,Filedst){

System.out.println("==文件寫入==");
try{
InputStreamin=null;
OutputStreamout=null;
try{

in=newBufferedInputStream(newFileInputStream(src),
BUFFER_SIZE);
out=newBufferedOutputStream(newFileOutputStream(dst),
BUFFER_SIZE);
byte[]buffer=newbyte[BUFFER_SIZE];
while(in.read(buffer)>0){
out.write(buffer);
}
}finally{
if(null!=in){
in.close();
}
if(null!=out){
out.close();
}
}
}catch(Exceptione){
e.printStackTrace();
}

System.out.println("写入成功！");
}
}

struts2中的struts.xml 配置

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

2
顶

0
踩