四、struts2+swfUpload例子二

官方站点：http://www.swfupload.org/
DEMO地址：http://demo.swfupload.org/

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

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

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



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



上传完成。（上传成功的附件不消失，上传发生错误文件消失。）
删除：删除上传完成的文件（删除后文件逐渐消失）。

下面我介绍一下我是怎么做的。请先了解
详细介绍SWFUpload和struts2+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 下载代码 （如果附件不能下载点击此处下载）

评论

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很透彻   正是我想要的，谢谢了