文件上传在平时的应用开发中是非常常见的,今天总结一下使用Extjs和Struts 来实现单个文件的简单上传,今天就以图片的上传为例子写个小的demo。
图片上传后效果:
前台的js文件代码:
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
id :'file',
name: 'photo', // 设置文件上传的name
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...',
listeners:{ // 配置当选中文件发生改变时
'change':function(file,oldFile,newFile){
// 在这里可以得到文件的实际物理路劲,达到预览的效果,今天没有调试出来,改天继续???预留
// alert(file); // 得到本地文件
// alert(fileName); // 得到文件名
// alert(object);
// Ext.getCmp('theimage').getEl().dom.src ='images/14-07-25.jpg';
}
}
},{
// columnWidth: 18,
bodyStyle: ' margin:4px 10px 10px 5px',
layout: 'form',
id:'form1',
items: [{
xtype: 'box',
id: 'theimage',
width: 400, height: 150,
//html:'<img id="xxx" src=""/>',
autoEl: { // 用来显示上传的图片
tag: 'img', //指定为img标签
src: '' , //指定url路径 ,
}
}
]
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'fileUploadAction',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.fileName + '" has been uploaded.');
Ext.getCmp('theimage').getEl().dom.src ='images/'+o.result.fileName;
}
});
}
}
}]
});
});
FileUploadAction 代码:
package edu.hue.jk.action;
import java.io.File;
@Controller("fileUploadAction")
public class FileUploadAction extends ActionSupport {
private File photo; //对应上传的js上传文件的属性: name: 'photo', // 设置文件上传的name
private JSONObject result;
private String photoFileName; // 对应上传的文件名
private String photoContentType; // 对应上传的文件类型
//得到文件实际存储的名字
public String getRealStoreName(){
int hzPostion=photoFileName.lastIndexOf('.'); // 得到最后一个点的下标
String houZui=photoFileName.substring(hzPostion,photoFileName.length());
Date theDate=new Date();// 取当前日期
SimpleDateFormat dateFormat=new SimpleDateFormat("yy-MM-dd");
return dateFormat.format(theDate)+houZui; // 根据当前的日期重新命名 ,这个应该是根据实际需要可以根据时间来命名
}
// 得到文件的真实存储路径
public String getRealPath(){
ServletContext context=ServletActionContext.getServletContext();
System.out.println("图片的物理路径为:"+photo.getAbsolutePath());
return context.getRealPath("/images")+"\\"+ getRealStoreName();
}
// 将源路劲的文件复制到目的路劲的文件
boolean copyFile(File src ,File dist){
boolean isCopy =true;
FileInputStream in=null;
FileOutputStream out=null;
try {
in=new FileInputStream(src);
out=new FileOutputStream(dist);
byte[] buff=new byte[1024];
int length=0; // 每次复制的字节数
while((length=in.read(buff, 0, 1024))>0){
out.write(buff, 0, length);
}
} catch (Exception e) {
isCopy=false; // 文件复制失败
e.printStackTrace();
}
return isCopy;
}
/***
* 用来处理文件的复制,实质上还是一个文件的读写
*/
@Override
public String execute() throws Exception {// 后台打印上传文件的信息
// System.out.println("fileContentType:"+photoContentType);
// System.out.println("fileName:"+photoFileName);
System.out.println("filePath:"+photo.getAbsoluteFile().getPath());
// System.out.println("fileRealPath:"+getRealPath());
Map<String,Object> map=new HashMap<String,Object>();
if(copyFile(photo,new File(getRealPath())))
{
map.put("success",true);
map.put("fileName", getRealStoreName());
}
else
map.put("success",false);
result=JSONObject.fromObject(map);
return super.execute();
}
//******************* setter and getter start****************************
public String getPhotoFileName() {
return photoFileName;
}
public void setPhotoFileName(String photoFileName) {
this.photoFileName = photoFileName;
}
public String getPhotoContentType() {
return photoContentType;
}
public void setPhotoContentType(String photoContentType) {
this.photoContentType = photoContentType;
}
public JSONObject getResult() {
return result;
}
public void setResult(JSONObject result) {
this.result = result;
}
public File getPhoto() {
return photo;
}
public void setPhoto(File photo) {
this.photo = photo;
}
//******************* end fo setter and getter ****************************
}