首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

4、struts2+swfUpload例子二

2013-08-04 
四、struts2+swfUpload例子二官方站点:http://www.swfupload.org/DEMO地址:http://demo.swfupload.org/上一

四、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 >    <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 + "%";


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包就可以)

热点排行