官方站点:[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]
如果你做的这个图片文件的长款与原图不同,不要忘记修改
[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来完成的。
每当我们选择一个文件上传时它就会new FileProgress(file, this.customSettings.progressTarget);
根据上面的代码分析其实就是在网页中添加了以下html代码
这段代码会被插入下面这段代码里面
如果你的css和javascrpt能力很强,动态在页面中创建对象改变这个控件的外貌是不是很容易呢。
选择好事件重写事件代码就ok了。(相关知识见[url=http://hanxin0311.iteye.com/blog/1915615]详细介绍SWFUpload[/url])
不过提醒一下,不要改变现有的这些对象的顺序,您看下后面的代码就这道了。
比如:
[i]3、如何控制上传队列中的文件消失(hidden)情况[/i]
这段代码是FileProgress文件disappear的属性代码。
[u]如果想上传后FileProgress不消失[/u]
在fileprogress.js文件找到下面代码,像我一样注释掉最后3行就ok了。当然你也可以在相应的事件中重写函数。
[u]删除的时候让FileProgress消失[/u]
在fileprogress.js文件中增加
在删除事件中调用即可。
(二)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] (如果附件不能下载点击此处下载)
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] (如果附件不能下载点击此处下载)