四、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,

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);}//……}<div id=file.id > <a href="#" style="visibility:hidden"> </a> <div name="code"><div id="fsUploadProgress1"><span name="code">this.fileProgressElement.childNodes[3].className = "progressBarInProgress";this.fileProgressElement.childNodes[3].style.width = percentage + "%";
// Fades out and clips away the FileProgress box.FileProgress.prototype.disappear = function () {//…}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.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));};