四、struts2+swfUpload例子二

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

[url=http://hanxin0311.iteye.com/blog/1915626]上一篇[/url]介绍的简历的例子，在struts2框架下基本完成了使用SWFUpload上传文件的功能。但是在我们自己的项目中不仅仅只是完成上传的功能，还要和我们的项目更进一步的整合在一起。

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

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

[img]http://dl2.iteye.com/upload/attachment/0087/6340/233762fe-9265-3afd-8b97-9796099177b4.jpg[/img]

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

[img]http://dl2.iteye.com/upload/attachment/0087/6342/06dc7cca-ebc0-39a5-b617-4203fc15d196.jpg[/img]

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

下面我介绍一下我是怎么做的。请先了解
[url=http://hanxin0311.iteye.com/blog/1915615]详细介绍SWFUpload[/url]和[url=http://hanxin0311.iteye.com/blog/1915626]struts2+swfUpload简单例子[/url]这2篇的关于SWFUpload的知识。

[b]（一）、SWFUpload如何改名upload控件的样式。[/b]

[i]1、修改上传flash按钮样式[/i]

SWFUpload Demo文件中提供了一个XPButtonUploadText_61x22.png 图片文件
[img]http://dl2.iteye.com/upload/attachment/0087/6344/ba127463-fb41-3001-a7aa-cba61715741a.jpg[/img]

重新制作一个类似的图片文件替换它。
[img]http://dl2.iteye.com/upload/attachment/0087/6346/bf105da2-9e80-38c9-af3f-ba4e03c8d718.jpg[/img]

如果你做的这个图片文件的长款与原图不同，不要忘记修改

// 按钮的处理
button_image_url : "images/XPButtonUploadText_61x22.png",
button_placeholder_id : "spanButtonPlaceholder1",
button_width: 61,
button_height: 22,

[i]2、修改上传队列附件样式[/i]

如果你不是很了解css和js的话自定义这个样式其实还是挺复杂的。
[img]http://dl2.iteye.com/upload/attachment/0087/6348/54b8b71f-bfec-3ad3-a830-0b7571c6cc7e.jpg[/img]

这个东西的构建是通过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"> </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了。（相关知识见[url=http://hanxin0311.iteye.com/blog/1915615]详细介绍SWFUpload[/url]）

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

比如：

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

[i]3、如何控制上传队列中的文件消失（hidden）情况[/i]

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

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

[u]如果想上传后FileProgress不消失[/u]
在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));
};

[u]删除的时候让FileProgress消失[/u]

在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像服务器传递参数
[url]http://hanxin0311.iteye.com/blog/1913946[/url]

（三）SWFUpload接受服务器Action返回的参数
[url]http://hanxin0311.iteye.com/blog/1915644[/url]

（四）SWFUpload中文乱码问题
[url]http://hanxin0311.iteye.com/blog/1915648[/url]

附件提供项目下载：（通过myeclipse AddStruts功能增加的struts2.1，如果项目导入myeclipse后，报错，下载[url=http://hanxin0311.iteye.com/blog/1915626]上一篇[/url]文章的例子用里面lib包就可以）

项目开发工具myeclipse8.5 [url=http://qd.baidupcs.com/file/d633bc1546f50df6a391e84403303e5d?xcode=4c9abb3f8f53993486949330f222817c703ded349d1b8518&fid=3691663317-250528-231805710&time=1375765520&sign=FDTAXER-DCb740ccc5511e5e8fedcff06b081203-t2f2Dn5A5%2FBLccylE9SBVUH3HRQ%3D&to=qb&fm=Q,Q,U&expires=8h&rt=pr&r=407642615]下载代码[/url] （如果附件不能下载点击此处下载）