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
踩