extjs 图片上传的两种方式
第一种图片上传到 数据库,页面从数据图读取图片显示,这种方式适合小图片上传,占用小,安全,这种方法我使用传统的流的读写进行图片的处理。

第二种图片上传到本地目录,然后将图片名称上传保存到数据库,这种方法没有第一种方法安全,但是这个方法比较方便,可以将图片保存在项目里,像icon图标就可以不用每次换一个环境就重新上传,这种方法使用的是架包(import org.apache.commons.io.FileUtils;)自带的相当成熟的方法也比较简单。

第一种

java类

public String addSysMenu() {
        HttpServletRequest req = ServletActionContext.getRequest();
        MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) req;
        File[] fileNames = wrapper.getFiles("modIconId");
        String[] filenames = wrapper.getFileNames("modIconId");
//流的操作,将图片存入数据库
        byte[] file =null;
        InputStream is=null;
        ByteArrayOutputStream isr=null;
        ByteArrayOutputStream bs=null;
        ImageOutputStream imout=null;
        try {
            isr = new ByteArrayOutputStream();
            for (int i=0;fileNames!=null&&i<fileNames.length;i++) {
                
                Image srcImg=ImageIO.read(fileNames[i]);
                int width =srcImg.getWidth(null);
                int height =srcImg.getHeight(null);
                
                if(width>=height){
                    int x= width/16;
                    height=height/x;
                    width=16;
                } else{
                    int y=height/16;
                    width=width/y;
                    height=16;
                }
                
                BufferedImage buffImg= null;
                buffImg= new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR);
                buffImg.getGraphics().drawImage(srcImg.getScaledInstance(width, height, Image.SCALE_SMOOTH), 0, 0, null);
                
                bs = new ByteArrayOutputStream();
                
                imout =ImageIO.createImageOutputStream(bs);
                ImageIO.write(buffImg, "PNG", isr );
                
                is= new ByteArrayInputStream(bs.toByteArray());
                
//                is = new FileInputStream(fileNames[i]);
                byte[] fileDate = new byte[256];
                int offset = 0;
                while (offset != -1) {
                    offset = is.read(fileDate);
                    if(offset!=-1){
                        isr.write(fileDate,0,offset);
                    }
                }
                file = isr.toByteArray();
            }
        } catch (Exception e1) {
            e1.printStackTrace();
        }finally{
            try {
                if(is!=null){
                    is.close();
                }
                if(isr!=null){
                    isr.close();
                }
                if(bs!=null){
                    bs.close();
                }
                if(imout!=null){
                    imout.close();
                }
            } catch (Exception e) {
                log.warn("流关闭失败",e);
            }
        }
                sysMenu.setIcon(file);
        
        String id = service.addSysMenu(sysMenu);
        this.setJsonStr("{success:true,id:'" + id + "'}");
        return SUCCESS;
    }



serviceimpl

@Override
    public String addSysMenu(SysMenu sysMenu) {
        SysMenuHome sysMenuHome=(SysMenuHome)home;
        String id=sysMenuHome.getId();
        sysMenu.setId(id);
        sysMenuHome.save(sysMenu);
        return id;
    }



jsp页面
  

var time = new Date();
                        var tPanel = Ext.create('Ext.tree.Panel',{
                            title:    "<img style='vertical-align:middle;' src='findIcon.action?time=" + time
                                    + "&sysMenu.id=" + sonnode.data.id
                                    +"'/>"
                           + "'  οnlοad='DrawImage(this,16,16)'/>"
                                    +sonnode.data.name,
                    
                        });

                                          


 第二种

java类

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;

import com.opensymphony.xwork2.ActionSupport;

public class FileUploadAction extends ActionSupport
{
    private String username;
    
    //注意,file并不是指前端jsp上传过来的文件本身,而是文件上传过来存放在临时文件夹下面的文件
    private File file;
    
    //提交过来的file的名字
    private String fileFileName;
    
    //提交过来的file的MIME类型
    private String fileContentType;

    public String getUsername()
    {
        return username;
    }

    public void setUsername(String username)
    {
        this.username = username;
    }

    public File getFile()
    {
        return file;
    }

    public void setFile(File file)
    {
        this.file = file;
    }

    public String getFileFileName()
    {
        return fileFileName;
    }

    public void setFileFileName(String fileFileName)
    {
        this.fileFileName = fileFileName;
    }

    public String getFileContentType()
    {
        return fileContentType;
    }

    public void setFileContentType(String fileContentType)
    {
        this.fileContentType = fileContentType;
    }
    
    @Override
    public String execute() throws Exception
    {
        //这边是web项目的路径,寻找合适的路径
        String root = ServletActionContext.getServletContext().getRealPath("/upload")
       //这边是架包在带的文件复制方法,非常方便
        FileUtils.copyFile(file, new File(root, fileFileName));
        System.out.println("fileFileName: " + fileFileName);
        System.out.println( root + " \\" +fileFileName);

         // 因为file是存放在临时文件夹的文件,我们可以将其文件名和文件路径打印出来,看和之前的fileFileName是否相同
        System.out.println("file: " + file.getName());
        System.out.println("file: " + file.getPath());

        return SUCCESS;
    }
}




    jsp页面,这边使用到了ajax的同步请求,只有执行完success方法后才继续进行别的方法,                  

var iconPath;
                        Ext.Ajax.request({
                            url : 'findIcon.action',
                            method : 'post',
                             async: false,
                            params : {
                                'sysMenu.id':sonnode.data.id
                            },
                            success : function(response, options) {
                                var o = Ext.JSON.decode(response.responseText);
                                iconPath=o.iconPath;
                            },
                            failure : function() {
                                Ext.Msg.alert("提示", "系统忙!");
                            }
                        });
                        
                        var tPanel = Ext.create('Ext.tree.Panel',{
                            title:    "<img style='vertical-align:middle;' src='upload/"+iconPath+";'  οnlοad='DrawImage(this,16,16)'/>"
                                    +sonnode.data.name,
                        });