`
softlife
  • 浏览: 109187 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext2.2+struts2.0上传进度条

阅读更多
第一步: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 树控件代码示例

    EXT3.0与Struts2.0是两个在Web开发中广泛应用的技术栈。EXT3.0是一个基于JavaScript的富客户端框架,提供了丰富的用户界面组件,包括树形控件(Tree)。Struts2.0则是一个Java Web应用的MVC框架,用于处理后端逻辑和...

    Ext + Gwt + Struts2.0开发5

    总结来说,"Ext + GWT + Struts2.0"的开发模式允许你利用ExtJS的强大UI组件库,GWT的远程服务调用机制,以及Struts2.0的MVC架构,创建一个完整的、高性能的Web应用。这种组合提供了从用户交互、数据处理到服务器端...

    Ext + Gwt + Struts2.0开发3

    在本文中,我们将探讨如何利用Ext、Gwt和Struts2.0这三种技术进行集成开发,特别是通过Google Plugin创建一个与Struts2.0框架交互的实例。 首先,我们来了解一下这三种技术的核心概念: 1. **Ext**:这是一个基于...

    Ext + Gwt + Struts2.0开发2

    ### 关于Ext + Gwt + Struts2.0的技术整合 在现代软件开发领域,将不同的框架和技术进行整合,能够创造出功能强大且高效的应用程序。本文将深入探讨如何结合Ext、Gwt(Google Web Toolkit)以及Struts2.0这三个框架...

    Ext + Gwt + Struts2.0开发4

    在本文中,我们将探讨如何使用Ext、Gwt和Struts2.0这三种技术结合进行Web应用开发。首先,理解每个技术的核心概念是至关重要的。 **Ext** 是一个JavaScript库,用于构建富客户端应用程序,提供了丰富的用户界面组件...

    ext2.1+struts2.0+spring2.5+jdbc

    这是一个基于Java技术栈的Web应用程序开发实例,涵盖了四个核心组件:EXTJS的ext2.1、Struts2.0、Spring2.5以及JDBC,同时也涉及到JSON数据格式的使用。接下来,我们将深入探讨这些技术和它们在项目中的作用。 首先...

    Ext + Gwt + Struts2.0开发1

    【Ext + Gwt + Struts2.0 开发1】是一个关于集成三种技术进行Web应用开发的主题。在本文中,我们将深入探讨这三者的技术特点以及如何将它们整合在一起。 **Ext** 是一个用于构建富客户端界面的JavaScript库,它提供...

    ext2.2+struts2使用json传输数据生成的树

    `Ext2.2`是一个JavaScript库,专门用于创建富客户端应用程序,而`Struts2`是一个基于MVC设计模式的Java Web框架,用于处理服务器端逻辑。这两个技术的结合可以提供强大的功能,尤其是在展示复杂数据结构时,如树形...

    ext2.0+struts2.1+spring2.0+jdbc框架

    标题 "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

    标题中的"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 文件上传实例

    在本文中,我们将深入探讨如何使用Ext3.2与Struts框架实现文件上传功能,同时解决中文乱码问题。这两个技术结合在一起,可以为Web应用提供高效、稳定的文件上传解决方案。 首先,Ext3.2是一个JavaScript库,它提供...

    使用ExtJs的插件UploadDialog+struts2.0实现多文件上传

    在本文中,我们将深入探讨如何使用ExtJS的UploadDialog插件与Struts2.0框架相结合,实现一个功能完备的多文件上传功能。这是一项在Web应用开发中常见的需求,对于用户交互性和数据管理有着重要作用。 首先,让我们...

    EXT2.3+EXT2.0教程

    EXT2.0和EXT2.3是EXT库的两个重要版本,提供了丰富的用户界面组件和强大的数据管理功能。这篇教程旨在帮助新手快速掌握EXT的使用,从而在Web开发中实现更加交互性强、功能完善的页面。 EXT2.0是一个重要的里程碑,...

    Ext+struts+ibatis 完整项目

    【标题】"Ext+struts+ibatis 完整项目" 涉及的技术栈是Web开发中的经典组合,主要用于构建高效、可扩展的企业级应用。这个项目虽然规模不大,但包含了实现一个完整Web应用程序所需的关键组件和流程,是学习和理解这...

    struts2.0+spring2.2+ibatis+quartz+extjs3.0 短信调度平台

    采用了struts2.0,spring2.2,ibatis,quartz,extjs3.0 实现了关于短信的调度框架,对接收人维护,动态添加每日短信数据,编写短信模版,最后通过quartz定时发送,因为短信接口收费所以不提供,需要jar包自己下载,...

    Jscript+Ext中文版+css2.0+J2EE+Editplus.rar

    Jscript+Ext中文版+css2.0+J2EE+Editplus.rar

    Ext2.0+struts2+spring2.5+ibatis2

    在IT领域,构建高效、可扩展的企业级应用是至关重要的,而"Ext2.0+Struts2+Spring2.5+Ibatis2"的组合就是一种常见的技术栈,用于实现这样的目标。这个技术组合提供了从用户界面到数据访问的全方位解决方案。 **Ext...

    spring+ext2.2+ext3.0中文api文档

    视频得来终觉浅,还是api最靠谱 本人下载一堆spring、ext的api文档,最终选择以上打包资料,深感网上的各种视频说的太肤浅,还是api文档最全面,资料好不好,自己看,不好我负责

    Ext中文版+Jscript+css2.0+J2EE+Editplus+Dhtml

    Ext中文版+Jscript+css2.0+J2EE+Editplus+Dhtml

    SSH+Ext2.2+MySql(2)

    采用SSH架构实现&lt;深入浅出ExtJs&gt;实例,系统包括:表格,分页,表单,表格与表单的关联等等,是初学者必不可少的学习资料,经本人实际测试通过。

Global site tag (gtag.js) - Google Analytics