弄了一天的图片上传(也就是在表单里面显示图片,预览图片),显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。
//uploadFile.js
Ext.onReady(function() {
var fileForm = new Ext.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) {
//得到选择的图片路径
var url = 'file://'
+ Ext.get('upload').dom.value;
// alert("url = " + url);
//是否是规定的图片类型
if (img_reg.test(url)) {
if (Ext.isIE) {
var image = 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
}]
});
// 上传图片类型
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/
});
//上傳圖片到服务器,
function submit() {
Ext.getCmp("fileUploadForm").getForm().submit({
url : "uploadAction.action",
method : "POST",
success : function(form, action) {
alert("success");
},
failure : function(form, action) {
alert("failure");
}
});
}
传入后台处理,使用struts2
package com.cocobra.action;
import java.io.*;
import java.util.Date;
import java.util.UUID;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private File upload;
private String uploadContentType;
private String uploadFileName; //fileName 前面必須和uplaod一致,不然找不到文件
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
// 上传文件的文件名
private String getFileExp(String name) {
int pos = name.lastIndexOf(".");
return name.substring(pos);
}
private static final int BUFFER_SIZE = 16 * 1024;
public String execute() throws Exception{
Date d = new Date();
System.out.println("uploadFileName = "+this.uploadFileName);
//upload -- wapps 下面的文件夹,用来存放图片
String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName); //使用時間戳作為文件名
System.out.println("toFile= "+toSrc);
File toFile = new File(toSrc);
writeFile(this.upload,toFile);
return SUCCESS;
}
private static void writeFile(File src, File dst) {
System.out.println(" == 文件寫入 == ");
try {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src),
BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0) {
out.write(buffer);
}
} finally {
if (null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("写入成功!");
}
}
struts2中的struts.xml 配置
<action name="uploadAction" class="com.cocobra.action.UploadAction" >
<interceptor-ref name="fileUpload">
<!--拦截器strut2自带的, 指定上传文件的格式,如果不符合规定,将会自动拦截下来 -->
<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>
<param name="maximumSize">20000000000</param>
</interceptor-ref>
<interceptor-ref name="defaultStack" />
<result name ="success" >/index.jsp</result >
</action>
分享到:
相关推荐
extjs4 + struct+ spring + hibernate 搭建后台。
Extjs+SpringMVC+MyBaits财务管控系统
ExtJs + Struts2 + JSON 程序总结
前端使用Extjs后台使用spring mvc 数据访问层使用hibernate 数据库使用mysql,是学习extjs、spring mvc以及hibernate的比较好的例子,希望能帮到各位。
Extjs4.0终极教程+案例源码(超详细,针对4.0) 目前最为卓越的4.0教程,还附加案例源码。白~吃,也能学会用extjs做页面
ExtJSweb 开发指南中的 简单图书管理系统 ExtJS3.0+spring+hibernate+struts
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
Extjs4登录功能+验证码+struts2
Extjs Tree + JSON + Struts2 开发war包
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码
EXTJS学习,webform+mvc routeing extjs布局 适合初学者
ExtJs原生批量上传 + 实时进度 Ext.define('MyApp.ux.upload.UploadWindow', { extend: 'Ext.window.Window', height: 400, width: 700, title: '文件上传', closeAction: 'hide', maximizable: true, ...
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
Extjs Tree + JSON + Struts2 例子
Extjs Tree + JSON + Struts2 示例源代码
Extjs4+MVC+struts2后台管理系统,
Extjs+java+swf多文件上传进度条显示项目 采用了swf插件 后端使用java servlet 项目简单使用 页面美观,希望能多交流
ExtJS4+JSON+Servlet(Struts2)实现登录验证