第一步:js部分代码
var fp = new Ext.FormPanel({
fileUpload : true,
width : 400,
frame : true,
title : '上传图片',
autoHeight : true,
bodyStyle : 'padding: 10px 10px 0 10px;',
labelWidth : 50,
url : 'uploadController?t=' + new Date(),
defaults : {
anchor : '95%',
allowBlank : false,
msgTarget : 'side'
},
items : [{
xtype : 'textfield',
fieldLabel : '名称',
name : 'name',
invalidText : '必须填写图片名称'
}, {
xtype : 'fileuploadfield',//此控件使用extjs的api中FileUploadField.js
id : 'form-file',
emptyText : '选择图片...',
invalidText : '必须选择图片',
fieldLabel : '地址',
name : 'url',
buttonCfg : {
text : '',
iconCls : 'upload'
}
}],
buttons : [{
text : 'Save',
handler : function() {
if (fp.getForm().isValid()) {
//显示进度条
Ext.MessageBox.show({
title : '正在上传文件',
width : 280,
progress : true,
icon : Ext.MessageBox.INFO,
cls : 'custom',//配置在css中图片
closable : false
});
fp.getForm().submit({
method : 'POST',
success : function(form, action) {
alert(action.result);
}
});
//设置一个定时器,每500毫秒向processController发送一次ajax请求
var timer = setInterval(function() {
//请求事例
Ext.Ajax.request({
//最好在ajax的请求的url上面都要带上日期戳,
//否则有可能每次出现的数据都是一样的,
//这和浏览器缓存有关
url : 'processController?t=' + new Date(),
method : 'get',
//处理ajax的返回数据
success : function(response, options) {
var obj = Ext.util.JSON
.decode(response.responseText);
if (obj.success != false) {
if (obj.finished) {
clearInterval(timer);
Ext.MessageBox.updateProgress(1,
obj.msg, 'finished');
Ext.MessageBox.hide();
} else {
var percentage = obj.percentage;
var process = percentage
.toString()
.substr(0, 6)
.replace(
/^(\d+\.\d{2})\d*$/,
"$1");
if (process > 1) {
return;
}
//1.var number = 123.4567
//number.toString().replace(/^(\d+\.\d{2})\d*$/,"$1") //结果:123.45
//2.var number = 123.4567
//number.toFixed(2); //结果:123.46 //IE 5.5以上
Ext.MessageBox.updateProgress(
percentage, process * 100
+ "%");
}
}
},
failure : function() {
clearInterval(timer);
Ext.Msg.alert('错误', '发生错误了。');
}
});
}, 500);
}
}
}, {
text : 'Reset',
handler : function() {
fp.getForm().reset();
}
}]
});
第二步:java类实现
package com.test.upload;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import com.myaction.FrmAction;//此frmaction是自封装类,此类实现了struts2.0的基本接口
import com.davidjc.ajaxfileupload.multipart.ProgressMonitor;
/**
* 主页图片面板控制action
*
*/
public class ImageAction extends FrmAction {
private File url;
private String fileName;
private String contentType;
public File getUrl() {
return url;
}
public void setUrl(File url) {
this.url = url;
}
public void setUrlFileName(String fileName) {
this.fileName = fileName;
}
public void setUrlContentType(String contentType) {
this.contentType = contentType;
}
/**
* 上传文件
* @param src
* @param dst
*/
private void copy(File src, File dst) {
try {
InputStream in = null ;
OutputStream out = null ;
try {
in = new BufferedInputStream( new FileInputStream(src) );
out = new BufferedOutputStream( new FileOutputStream(dst));
byte [] buffer = new byte [in.available()];
while (in.read(buffer) > 0 ) {
out.write(buffer);
}
} finally {
if ( null != in) {
in.close();
}
if ( null != out) {
out.close();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 上传控制文件
* @return
*/
public String uploadController(){
try {
String imageName = System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
File uploadedFile = new File(request.getSession().getServletContext().getRealPath( "/images" ) + "/" + imageName);
copy(url, uploadedFile);
response.getWriter().write("{success:true,msg:'上传文件成功!'}");
response.getWriter().flush();
} catch (Exception e) {
e.printStackTrace();
}
return NONE;
}
/**
* 上传进程控制
* @return
* @throws Exception
*/
public String processController() throws Exception{
double d = 0.00;
//从session取出uploadPercentage并送回浏览器
Object mon_obj = this.sessionMap.get("com.davidjc.ajaxfileupload.multipart.ProgressMonitor");
if (mon_obj != null) {
ProgressMonitor monitor = (ProgressMonitor)mon_obj;
d = ((double)monitor.getBytesRead()/(double)monitor.getBytesLength());
}
System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"+d+"<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<");
String msg = "";
if(d<1){
//d<0代表正在上传,
msg = "正在上传文件...";
response.getWriter().write("{success:true, msg: '"+msg+"', percentage:'" + d + "', finished: false}");
}
else if(d>=1){
//d>1 代表上传已经结束
msg = "上传成功!";
this.sessionMap.remove("com.davidjc.ajaxfileupload.multipart.ProgressMonitor");
response.getWriter().write("{success:true, msg: '"+msg+"', percentage:1, finished:true}");
//注意返回的数据,success代表状态
//percentage是百分比
//finished代表整个过程是否结束。
}
response.getWriter().flush();
return NONE;
}
}
第三步:在struts.xml加入如下配置
<!--实现机制:使用我们自己的解析器,主要机上 progressListener; -->
<bean type="org.apache.struts2.dispatcher.multipart.MultiPartRequest" name="monitoredJakarta"
class="com.davidjc.ajaxfileupload.multipart.MonitoredMultiPartRequest" scope="default" optional="true" />
<constant name="struts.multipart.parser" value="monitoredJakarta"/>
<constant name="struts.multipart.maxSize" value="2000000000"/><!--解决不能上传大于2M文件问题-->
主要依赖jar文件:
commons-io-1.3.1.jar
commons-fileupload-1.2.jar
AjaxFileUpload-0.03.jar //此jar文件自定义实现上传机制。载入附件中。
注:此文章是本人把网上七零八碎的资料整理后的结果。
分享到:
相关推荐
EXT3.0与Struts2.0是两个在Web开发中广泛应用的技术栈。EXT3.0是一个基于JavaScript的富客户端框架,提供了丰富的用户界面组件,包括树形控件(Tree)。Struts2.0则是一个Java Web应用的MVC框架,用于处理后端逻辑和...
总结来说,"Ext + GWT + Struts2.0"的开发模式允许你利用ExtJS的强大UI组件库,GWT的远程服务调用机制,以及Struts2.0的MVC架构,创建一个完整的、高性能的Web应用。这种组合提供了从用户交互、数据处理到服务器端...
在本文中,我们将探讨如何利用Ext、Gwt和Struts2.0这三种技术进行集成开发,特别是通过Google Plugin创建一个与Struts2.0框架交互的实例。 首先,我们来了解一下这三种技术的核心概念: 1. **Ext**:这是一个基于...
### 关于Ext + Gwt + Struts2.0的技术整合 在现代软件开发领域,将不同的框架和技术进行整合,能够创造出功能强大且高效的应用程序。本文将深入探讨如何结合Ext、Gwt(Google Web Toolkit)以及Struts2.0这三个框架...
在本文中,我们将探讨如何使用Ext、Gwt和Struts2.0这三种技术结合进行Web应用开发。首先,理解每个技术的核心概念是至关重要的。 **Ext** 是一个JavaScript库,用于构建富客户端应用程序,提供了丰富的用户界面组件...
这是一个基于Java技术栈的Web应用程序开发实例,涵盖了四个核心组件:EXTJS的ext2.1、Struts2.0、Spring2.5以及JDBC,同时也涉及到JSON数据格式的使用。接下来,我们将深入探讨这些技术和它们在项目中的作用。 首先...
【Ext + Gwt + Struts2.0 开发1】是一个关于集成三种技术进行Web应用开发的主题。在本文中,我们将深入探讨这三者的技术特点以及如何将它们整合在一起。 **Ext** 是一个用于构建富客户端界面的JavaScript库,它提供...
`Ext2.2`是一个JavaScript库,专门用于创建富客户端应用程序,而`Struts2`是一个基于MVC设计模式的Java Web框架,用于处理服务器端逻辑。这两个技术的结合可以提供强大的功能,尤其是在展示复杂数据结构时,如树形...
标题 "ext2.0+struts2.1+spring2.0+jdbc框架" 提到的是一个基于Java的Web开发架构,它结合了四个关键组件:EXT JS的2.0版本,Struts2.1,Spring2.0,以及JDBC(Java Database Connectivity)。这个组合在早期的Web...
标题中的"EXt2.1+sturts2.0+spring2.5+hibernate"是一个典型的Java Web开发技术栈,它包含了四个关键组件:EXT JS 2.1、Struts 2.0、Spring 2.5和Hibernate。这些技术在2000年代末至2010年代初是非常流行的,它们...
在本文中,我们将深入探讨如何使用Ext3.2与Struts框架实现文件上传功能,同时解决中文乱码问题。这两个技术结合在一起,可以为Web应用提供高效、稳定的文件上传解决方案。 首先,Ext3.2是一个JavaScript库,它提供...
在本文中,我们将深入探讨如何使用ExtJS的UploadDialog插件与Struts2.0框架相结合,实现一个功能完备的多文件上传功能。这是一项在Web应用开发中常见的需求,对于用户交互性和数据管理有着重要作用。 首先,让我们...
EXT2.0和EXT2.3是EXT库的两个重要版本,提供了丰富的用户界面组件和强大的数据管理功能。这篇教程旨在帮助新手快速掌握EXT的使用,从而在Web开发中实现更加交互性强、功能完善的页面。 EXT2.0是一个重要的里程碑,...
【标题】"Ext+struts+ibatis 完整项目" 涉及的技术栈是Web开发中的经典组合,主要用于构建高效、可扩展的企业级应用。这个项目虽然规模不大,但包含了实现一个完整Web应用程序所需的关键组件和流程,是学习和理解这...
采用了struts2.0,spring2.2,ibatis,quartz,extjs3.0 实现了关于短信的调度框架,对接收人维护,动态添加每日短信数据,编写短信模版,最后通过quartz定时发送,因为短信接口收费所以不提供,需要jar包自己下载,...
Jscript+Ext中文版+css2.0+J2EE+Editplus.rar
在IT领域,构建高效、可扩展的企业级应用是至关重要的,而"Ext2.0+Struts2+Spring2.5+Ibatis2"的组合就是一种常见的技术栈,用于实现这样的目标。这个技术组合提供了从用户界面到数据访问的全方位解决方案。 **Ext...
视频得来终觉浅,还是api最靠谱 本人下载一堆spring、ext的api文档,最终选择以上打包资料,深感网上的各种视频说的太肤浅,还是api文档最全面,资料好不好,自己看,不好我负责
Ext中文版+Jscript+css2.0+J2EE+Editplus+Dhtml
采用SSH架构实现<深入浅出ExtJs>实例,系统包括:表格,分页,表单,表格与表单的关联等等,是初学者必不可少的学习资料,经本人实际测试通过。