`

四、struts2+swfUpload例子二

阅读更多
官方站点:http://www.swfupload.org/
DEMO地址:http://demo.swfupload.org/

上一篇介绍的简历的例子,在struts2框架下基本完成了使用SWFUpload上传文件的功能。但是在我们自己的项目中不仅仅只是完成上传的功能,还要和我们的项目更进一步的整合在一起。

SWFUpload的上传过程中各个步骤的显示方式要改变;我们需要往服务器传递参数;需要从服务器返回参数;这些问题上面的例子都没有解决。

看下面这个图片,这是我在项目中的SWFUpload上传附件的效果(其实仿的是126邮箱做的)。



上传过程中
红x:取消上传



上传完成。(上传成功的附件不消失,上传发生错误文件消失。)
删除:删除上传完成的文件(删除后文件逐渐消失)。

下面我介绍一下我是怎么做的。请先了解
详细介绍SWFUploadstruts2+swfUpload简单例子这2篇的关于SWFUpload的知识。

(一)、SWFUpload如何改名upload控件的样式。

1、修改上传flash按钮样式

SWFUpload Demo文件中提供了一个XPButtonUploadText_61x22.png 图片文件


重新制作一个类似的图片文件替换它。


如果你做的这个图片文件的长款与原图不同,不要忘记修改
// 按钮的处理
button_image_url : "images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 61,
button_height: 22,


2、修改上传队列附件样式

如果你不是很了解css和js的话自定义这个样式其实还是挺复杂的。


这个东西的构建是通过fileprogress.js文件和defaut.css来完成的。
function FileProgress(file, targetID) {
	this.fileProgressID = file.id;

	this.opacity = 100;
	this.height = 0;
	

	this.fileProgressWrapper = document.getElementById(this.fileProgressID);
	if (!this.fileProgressWrapper) {
		this.fileProgressWrapper = document.createElement("div");
		this.fileProgressWrapper.className = "progressWrapper";
		this.fileProgressWrapper.id = this.fileProgressID;

		this.fileProgressElement = document.createElement("div");
		this.fileProgressElement.className = "progressContainer";

		var progressCancel = document.createElement("a");
		progressCancel.className = "progressCancel";
		progressCancel.href = "#";
		progressCancel.style.visibility = "hidden";
		progressCancel.appendChild(document.createTextNode(" "));

		var progressText = document.createElement("div");
		progressText.className = "progressName";
		progressText.appendChild(document.createTextNode(file.name));

		var progressBar = document.createElement("div");
		progressBar.className = "progressBarInProgress";

		var progressStatus = document.createElement("div");
		progressStatus.className = "progressBarStatus";
		progressStatus.innerHTML = " ";

		this.fileProgressElement.appendChild(progressCancel);
		this.fileProgressElement.appendChild(progressText);
		this.fileProgressElement.appendChild(progressStatus);
		this.fileProgressElement.appendChild(progressBar);

		this.fileProgressWrapper.appendChild(this.fileProgressElement);

		document.getElementById(targetID).appendChild(this.fileProgressWrapper);
	} else {
		this.fileProgressElement = this.fileProgressWrapper.firstChild;
		this.reset();
	}

	this.height = this.fileProgressWrapper.offsetHeight;
	this.setTimer(null);


}
//……
}


每当我们选择一个文件上传时它就会new FileProgress(file, this.customSettings.progressTarget);

根据上面的代码分析其实就是在网页中添加了以下html代码
<div id=file.id class="progressWrapper">
	<div class="progressContainer" >
    	<a href="#" class="progressCancel" style="visibility:hidden"> </a>
        <div class="progressName"> file.name </div>
        <div class="progressBarInProgress"></div>
        <div class="progressBarStatus">&nbsp;</div>
    </div>
</div>
//css文件在defaut.css中。
//file.id 和file.name 选中上传文件的id和name属性的值。


这段代码会被插入下面这段代码里面
<div class="fieldset flash" id="fsUploadProgress1">
	<span class="legend">文件上传</span>
</div>


如果你的css和javascrpt能力很强,动态在页面中创建对象改变这个控件的外貌是不是很容易呢。

选择好事件重写事件代码就ok了。(相关知识见详细介绍SWFUpload

不过提醒一下,不要改变现有的这些对象的顺序,您看下后面的代码就这道了。

比如:
this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
this.fileProgressElement.childNodes[3].style.width = percentage + "%";


3、如何控制上传队列中的文件消失(hidden)情况

// Fades out and clips away the FileProgress box.
FileProgress.prototype.disappear = function () {//…}


这段代码是FileProgress文件disappear的属性代码。

如果想上传后FileProgress不消失
在fileprogress.js文件找到下面代码,像我一样注释掉最后3行就ok了。当然你也可以在相应的事件中重写函数。

FileProgress.prototype.setComplete = function () {
	this.fileProgressElement.className = "progressContainer blue";
	this.fileProgressElement.childNodes[3].className = "progressBarComplete";
	this.fileProgressElement.childNodes[3].style.width = "";

	var oSelf = this;
	//this.setTimer(setTimeout(function () {
	//	oSelf.disappear();
	//}, 10000));
};


删除的时候让FileProgress消失

在fileprogress.js文件中增加
FileProgress.prototype.setDelete = function () {
	this.fileProgressElement.className = "progressContainer";
	this.fileProgressElement.childNodes[3].className = "progressBarError";
	this.fileProgressElement.childNodes[3].style.width = "";

	var oSelf = this;
	this.setTimer(setTimeout(function () {
		oSelf.disappear();
	}, 0));
};


在删除事件中调用即可。

(二)SWFUpload像服务器传递参数
http://hanxin0311.iteye.com/blog/1913946

(三)SWFUpload接受服务器Action返回的参数
http://hanxin0311.iteye.com/blog/1915644

(四)SWFUpload中文乱码问题
http://hanxin0311.iteye.com/blog/1915648

附件提供项目下载:(通过myeclipse AddStruts功能增加的struts2.1,如果项目导入myeclipse后,报错,下载上一篇文章的例子用里面lib包就可以)

项目开发工具myeclipse8.5 下载代码 (如果附件不能下载点击此处下载)
  • 大小: 22.5 KB
  • 大小: 25.5 KB
  • 大小: 2.9 KB
  • 大小: 3.9 KB
  • 大小: 3.1 KB
分享到:
评论
6 楼 qq_31945283 2016-02-01  
完美解决了我的难题,谢谢
5 楼 qq_31945283 2016-02-01  
4 楼 flyarun 2015-10-17  
牛B ,这种人就是我的偶像
3 楼 Dex 2015-07-10  
非常感谢,你的资料对我很有帮助!!!
2 楼 tiansong163 2014-07-18  
你好,楼主,swfupload 怎么与ftp整合的?
1 楼 lzc754225010 2014-04-21  
研究的swfupload很透彻   正是我想要的,谢谢了

相关推荐

    三、struts2+swfUpload简单例子

    这个"三、struts2+swfUpload简单例子"很可能是关于如何集成这两个技术来创建一个高效的文件上传功能的教程。 在集成Struts2和SwfUpload的过程中,有几个关键知识点是必不可少的: 1. **Struts2框架**:Struts2提供...

    struts2+swfupload上传

    Struts2和SwfUpload是两个在Web开发中用于文件上传的工具,它们结合使用可以提供一种具有用户体验优化的文件上传功能,特别是包含了进度条显示,使得用户能够清晰地了解文件上传的状态。以下是对这两个技术及其结合...

    java+struts+swfupload文件上传下载

    2. **创建Struts Action**:在Struts框架中创建一个Action类,用于接收SwfUpload上传的文件。这个Action需要继承自Struts的抽象类,并覆盖上传方法。 3. **处理上传请求**:在Action的上传方法中,使用Java的IO流...

    struts2+swfupload实现大文件多文件上传

    Struts2和SwfUpload是两个在Web开发中用于处理用户交互的重要工具,它们结合使用可以实现高效的大文件和多文件上传功能。Struts2是一个基于MVC(Model-View-Controller)架构的Java框架,它提供了强大的控制层支持,...

    Struts+swfupload实现文件上传功能

    2. **创建Struts Action**:在Struts框架中,我们需要创建一个Action类来处理文件上传请求。这个Action需要实现文件接收和保存的功能。在Struts配置文件(struts.xml)中,为该Action定义一个对应的URL映射。 3. **...

    Struts2+SWFUpload上传文件并显示进度条

    在Struts2应用中集成SWFUpload,可以解决上传文件时无进度反馈的问题,提高用户交互性。 集成步骤如下: 1. **添加依赖**:首先,需要将SWFUpload的SWF文件和JavaScript库引入到项目中。这通常涉及到在HTML页面中...

    JAVA+Struts2+swfupload文件上传下载

    本项目基于JAVA、Struts2框架以及swfupload插件,提供了一个完整的文件上传下载解决方案。以下是对这个项目的详细解读: 首先,**JAVA**作为后端编程语言,以其跨平台性和丰富的库资源被广泛应用于Web开发。在这里...

    struts2+swfupload多文件上传

    NULL 博文链接:https://longhahe.iteye.com/blog/1756339

    Ext2+SwfUpload(最新版)构建文件上传框

    `Ext2`和`SwfUpload`是两个在创建此类功能时常用的工具。本文将深入探讨这两个技术,以及如何利用它们构建一个现代化的文件上传框。 首先,让我们了解`Ext2`。ExtJS是一个JavaScript库,它提供了一套强大的组件模型...

    一个Ext2+SWFUpload做的图片上传对话框的例程

    本例程“一个Ext2+SWFUpload做的图片上传对话框”提供了一个高效且用户友好的解决方案,用于在Web应用中实现图片上传。下面我们将详细探讨这个例程涉及的技术和知识点。 首先,`Ext2`是Ext JS的一个早期版本,这是...

    jquery+SWFUpload+COS上传组件的使用

    jquery+SWFUpload+COS上传组件的使用 jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件...

    strut2+swfupload+extjs4文件上传

    本示例解决了strut2+swfupload+extjs4文件上传过程中,后台struts接收不到上传文件的问题。而这个问题如果用servlet做后台可能就不存在。开发者可以用本例源码移植到自己项目中使用 。

    JQ + swfupload 多文件上传

    2. **集成jQuery**:接着,引入jQuery库,并编写JavaScript代码来初始化SwfUpload实例,绑定事件处理器,如`fileDialogComplete`(文件选择完成后触发)、`uploadProgress`(文件上传进度更新时触发)和`...

    ext struts2 swfupload 跨域文件上传

    "ext struts2 swfupload 跨域文件上传"这个主题涉及到三个关键技术和概念:EXTJS(Ext JS)、Struts2以及SwfUpload,它们共同解决了Web应用中的跨域文件上传问题。 EXTJS是一种强大的JavaScript库,用于构建富...

    jquery+swfupload+servlet_多文件上传

    2. **初始化SWFUpload**:在JavaScript中,使用SWFUpload的配置对象设置上传参数,如URL(Servlet的地址)、文件类型限制、最大文件大小等,并创建SWFUpload实例。 3. **事件监听**:设置SWFUpload的事件监听器,...

    ThinkPHP+swfupload多图上传

    在这个场景下,"ThinkPHP+swfupload多图上传" 提供了一种解决方案。本文将深入探讨这两个技术如何结合,以及它们在实现多图上传时的关键知识点。 首先,让我们了解下ThinkPHP。ThinkPHP是一个基于PHP的开源框架,它...

    解决Struts2与SWFupload上传冲突问题

    Struts2和SWFupload是两个在Web开发中常见的组件。Struts2是一个基于MVC设计模式的Java Web框架,而SWFupload则是一个JavaScript库,用于实现Flash的文件上传功能。两者结合使用时,可能会遇到一些冲突问题,主要是...

    ASP+swfUpload使用实例

    在本实例中,我们关注的是如何在ASP中整合SWFUpload工具,这是一款流行的JavaScript和Flash结合的文件上传组件。SWFUpload允许用户在后台批量上传大文件,提供了丰富的自定义选项和进度条功能,极大地提升了用户体验...

Global site tag (gtag.js) - Google Analytics