SWFUpload可以说是目前最好的多文件上传工具之一,虽然它是基于flash插件开发的,但是相比目前很多js多文件上传还是具有很多优点:
可以同时选择多个文件上传(注意是以此选择文件)
无刷新上传
可以显示进度条
良好的浏览器兼容性
兼容其他js类库
SWFUpload另个优点就是它优秀的设计,它提供了一组简明的Javascript事件,借助它们开发者可以方便的在文件上传过程中更新页面的内容。
下面是SWFUpload在具体使用过程中js代码
MultiFileHandler.js
function
fileQueueError(file, errorCode, message) {
try
{
var
imageName =
"error.gif"
;
var
errorName =
""
;
if
(errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
errorName =
"文件超过最大上传个数!"
;
}
if
(errorName !==
""
) {
alert(errorName);
return
;
}
switch
(errorCode) {
case
SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
imageName =
"zerobyte.gif"
;
break
;
case
SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
imageName =
"toobig.gif"
;
break
;
case
SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
case
SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
default
:
alert(message);
break
;
}
addImage(
"/modules/commons/view/multifileupload/images/"
+ imageName);
}
catch
(ex) {
this
.debug(ex);
}
}
function
fileDialogComplete(numFilesSelected, numFilesQueued) {
try
{
if
(numFilesQueued > 0) {
this
.startUpload();
}
}
catch
(ex) {
this
.debug(ex);
}
}
function
uploadProgress(file, bytesLoaded) {
try
{
var
percent = Math.ceil((bytesLoaded / file.size) * 100);
var
progress =
new
FileProgress(file,
this
.customSettings.upload_target);
progress.setProgress(percent);
if
(percent == 100) {
if
(showThumbnail){
progress.setStatus(
"正在创建缩略图..."
);
}
progress.toggleCancel(
false
,
this
);
uploadNum++;
setUploadNumber(uploadNum);
}
else
{
progress.setStatus(
"正在上传中,已完成"
+percent+
"%"
);
progress.toggleCancel(
true
,
this
);
}
}
catch
(ex) {
this
.debug(ex);
}
}
//文件数据发送成功,不管是否成功保存;其serverData是否服务器端处理完以后的返回值
//这里规定返回值必须为success才代表成功
var
serverErrorInfo=
""
;
function
uploadSuccess(file, serverData) {
try
{
var
sd=serverData.replace(/ /gi,
''
).replace(/ /gi,
''
).replace(/\r/gi,
''
).replace(/\n/gi,
''
).replace(/\t/gi,
''
);
if
(showThumbnail){
var
filePath=
".."
;
if
(savePath!=
''
){
filePath=filePath+
"/"
+savePath;
}
filePath=filePath+
'/'
+file.name;
addImage(filePath);
}
var
progress =
new
FileProgress(file,
this
.customSettings.upload_target);
if
(showThumbnail){
progress.setStatus(
"缩略图创建完成!"
);
}
if
(sd!=
''
){
if
(sd!=
'success'
){
if
(serverErrorInfo!=
''
){
serverErrorInfo+=
'<br />'
;
}
serverErrorInfo+=sd;
document.getElementById(
'divError'
).innerHTML=serverErrorInfo;
}
}
progress.toggleCancel(
false
);
}
catch
(ex) {
this
.debug(ex);
}
}
//服务器端返回非空值才认为上传成功,触发下面事件
function
uploadComplete(file) {
try
{
/* I want the next upload to continue automatically so I'll call startUpload here */
if
(
this
.getStats().files_queued > 0) {
this
.startUpload();
}
else
{
var
progress =
new
FileProgress(file,
this
.customSettings.upload_target);
progress.setComplete();
if
(!isCancel){
progress.setStatus(
"文件上传成功!"
);
}
else
{
progress.setStatus(
"上传已取消!"
);
isCancel=
false
;
}
progress.toggleCancel(
false
);
}
}
catch
(ex) {
this
.debug(ex);
}
}
function
uploadError(file, errorCode, message) {
var
imageName =
"error.gif"
;
var
progress;
try
{
switch
(errorCode) {
case
SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
try
{
progress =
new
FileProgress(file,
this
.customSettings.upload_target);
progress.setCancelled();
progress.setStatus(
"取消完成!"
);
progress.toggleCancel(
false
);
}
catch
(ex1) {
this
.debug(ex1);
}
break
;
case
SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
try
{
progress =
new
FileProgress(file,
this
.customSettings.upload_target);
progress.setCancelled();
progress.setStatus(
"已停止!"
);
progress.toggleCancel(
true
);
}
catch
(ex2) {
this
.debug(ex2);
}
case
SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
imageName =
"uploadlimit.gif"
;
break
;
default
:
alert(message);
break
;
}
addImage(
"/modules/commons/view/multifileupload/images/"
+ imageName);
}
catch
(ex3) {
this
.debug(ex3);
}
}
function
addImage(src) {
var
imageName=getFileName(src);
var
divImage=document.createElement(
"span"
);
divImage.style.margin =
"5px"
;
divImage.style.padding =
"1px"
;
divImage.style.width =
"59px"
;
divImage.style.height =
"85px"
;
divImage.style.display=
"block"
;
divImage.style.border=
"10px"
;
divImage.style.float=
"left"
;
divImage.attachEvent(
"onmouseover"
, setBackground(divImage,
"#FFFACD"
));
divImage.attachEvent(
"onmouseout"
, setBackground(divImage,
"#FFFFFF"
));
var
newImg = document.createElement(
"img"
);
//newImg.style.margin = "5px";
newImg.style.width =
"59px"
;
newImg.style.height =
"59px"
;
newImg.alt=imageName;
var
divImageName=document.createElement(
"div"
);
divImageName.style.marginTop=
"5px"
;
divImageName.style.width=
"59px"
;
divImageName.style.height=
"20px"
;
divImageName.style.textAlign=
"center"
;
divImageName.innerHTML=imageName;
divImage.appendChild(newImg);
divImage.appendChild(divImageName);
document.getElementById(
"thumbnails"
).appendChild(divImage);
if
(newImg.filters) {
try
{
newImg.filters.item(
"DXImageTransform.Microsoft.Alpha"
).opacity = 0;
}
catch
(e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=
' + 0 + '
)
';
}
} else {
newImg.style.opacity = 0;
}
newImg.onload = function () {
fadeIn(newImg, 0);
};
newImg.src = src;
}
function fadeIn(element, opacity) {
var reduceOpacityBy = 5;
var rate = 30; // 15 fps
if (opacity < 100) {
opacity += reduceOpacityBy;
if (opacity > 100) {
opacity = 100;
}
if (element.filters) {
try {
element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
element.style.filter = '
progid:DXImageTransform.Microsoft.Alpha(opacity=
' + opacity + '
)
';
}
} else {
element.style.opacity = opacity / 100;
}
}
if (opacity < 100) {
setTimeout(function () {
fadeIn(element, opacity);
}, rate);
}
}
var isCancel=false;//是否取消上传
var uploadNum=0;//已成功上传文件
cancelUpload=function(){
document.getElementById('
imgCancelButton
').style.visible='
hidden
';
swfu.cancelUpload();
/*var fileProgressID = "divFileProgress";
var fileProgressWrapper = document.getElementById(fileProgressID);
var fileProgressElement = fileProgressWrapper.firstChild;
fileProgressElement.childNodes[2].innerHTML = '
上传已停止!
';*/
isCancel=true;
}
setUploadNumber=function(num){
document.getElementById("lgdUploadNumber").innerHTML="文件上传(已上传<span id='
spNumber
'>"+num+"</span>个文件)";
}
getFileName=function(filePath){
var i=0;
if(filePath.indexOf('
/
')==-1){
i=filePath.lastIndexOf('
\\
');
}else{
i=filePath.lastIndexOf('
/
');
}
var j=filePath.lastIndexOf('
.');
var
fileName=filePath.substring(i+1,j);
return
fileName;
}
setBackground=
function
(obj,color){
return
function
(){
setBackgroundWithParams(obj,color);
}
}
setBackgroundWithParams=
function
(obj,color){
obj.style.backgroundColor=color;
obj.style.border=
"1px"
;
obj.style.borderColor=
"red"
;
}
/* ******************************************
* FileProgress Object
* Control object for displaying file info
* ****************************************** */
function
FileProgress(file, targetID) {
this
.fileProgressID =
"divFileProgress"
;
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.id =
"imgCancelButton"
;
progressCancel.attachEvent(
"onclick"
, cancelUpload);
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);
fadeIn(
this
.fileProgressWrapper, 0);
}
else
{
this
.fileProgressElement =
this
.fileProgressWrapper.firstChild;
this
.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
}
this
.height =
this
.fileProgressWrapper.offsetHeight;
}
FileProgress.prototype.setProgress =
function
(percentage) {
this
.fileProgressElement.className =
"progressContainer green"
;
this
.fileProgressElement.childNodes[3].className =
"progressBarInProgress"
;
this
.fileProgressElement.childNodes[3].style.width = percentage +
"%"
;
};
FileProgress.prototype.setComplete =
function
() {
this
.fileProgressElement.className =
"progressContainer blue"
;
this
.fileProgressElement.childNodes[3].className =
"progressBarComplete"
;
this
.fileProgressElement.childNodes[3].style.width =
""
;
};
FileProgress.prototype.setError =
function
() {
this
.fileProgressElement.className =
"progressContainer red"
;
this
|