extjs 图片上传的两种方式
第一种图片上传到 数据库,页面从数据图读取图片显示,这种方式适合小图片上传,占用小,安全,这种方法我使用传统的流的读写进行图片的处理。
第二种
jsp页面,这边使用到了ajax的同步请求,只有执行完success方法后才继续进行别的方法,
第一种图片上传到 数据库,页面从数据图读取图片显示,这种方式适合小图片上传,占用小,安全,这种方法我使用传统的流的读写进行图片的处理。
第二种图片上传到本地目录,然后将图片名称上传保存到数据库,这种方法没有第一种方法安全,但是这个方法比较方便,可以将图片保存在项目里,像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,
});