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.fileProgressElement.childNodes[3].className
= "progressBarError"; this.fileProgressElement.childNodes[3].style.width
= "";};FileProgress.prototype.setCancelled
= function ()
{ this.fileProgressElement.className
= "progressContainer"; this.fileProgressElement.childNodes[3].className
= "progressBarError"; this.fileProgressElement.childNodes[3].style.width
= "";};FileProgress.prototype.setStatus
= function (status)
{ this.fileProgressElement.childNodes[2].innerHTML
= status;};FileProgress.prototype.toggleCancel
= function (show,
swfuploadInstance) { this.fileProgressElement.childNodes[0].style.visibility
= show ? "visible" :
"hidden"; if (swfuploadInstance)
{ var fileID
= this.fileProgressID; this.fileProgressElement.childNodes[0].onclick
= function ()
{ swfuploadInstance.cancelUpload(fileID); return false; }; }}; |
MultiFileUpload.js
var uploadUrl='$!{request.uploadUrl}';//上传处理的urlvar savePath='$!{request.savePath}';var fileType='$!{request.fileType}';//var
postName='$request.postName';var sizeLimit='$!{request.sizeLimit}';var uploadLimit='$!{request.uploadLimit}';//var
buttonWidth='$!{request.buttonWidth}';//var
buttonHeight='$!{request.buttonHeight}';var buttonText='$!{request.buttonText}';var buttonAlign='$!{request.buttonAlign}';var componentHeight='$!{request.componentHeight}';var showThumbnail='$!{request.showThumbnail}';
//是否显示缩略图,一般用于图片上传,默认为falsevar thumbnailScroll='$!{request.thumbnailScroll}';//缩略图部分是否显示滚动条if(uploadUrl==''){ //uploadUrl='/Commons/fileUpload.do'; uploadUrl='/commons/paste.do?template=/multifileupload/data/upload.htm';}//if(postName=''){//
postName= "Filedata";//}if(fileType==''){ fileType='*.*';}if(uploadLimit==''){ uploadLimit=0;}//if(buttonWidth==''){//
buttonWidth=100;//}//if(buttonHeight==''){//
buttonHeight=22;//}if(buttonText==''){ buttonText='选
择 文 件';}if(buttonAlign==''){ buttonAlign='left';}if(showThumbnail==''){ showThumbnail=false;}else{ showThumbnail=true;}if(thumbnailScroll==''){ thumbnailScroll=false;}else{ thumbnailScroll=true;}if(uploadUrl.indexOf('?')!=-1){ uploadUrl=uploadUrl+'&savePath='+encodeURIComponent(savePath);}else{ uploadUrl=uploadUrl+'?savePath='+encodeURIComponent(savePath);}var swfu;window.onload
= function ()
{ swfu
= new SWFUpload({ upload_url:
uploadUrl, file_size_limit
: sizeLimit, file_types
: fileType, //file_types_description
: "JPG Images", file_upload_limit
: uploadLimit, //
Zero means unlimited file_queue_error_handler
: fileQueueError, file_dialog_complete_handler
: fileDialogComplete, upload_progress_handler
: uploadProgress, upload_error_handler
: uploadError, upload_success_handler
: uploadSuccess, upload_complete_handler
: uploadComplete, button_image_url
: "/modules/commons/view/multifileupload/images/XPButtonNoText_160x22.png", button_placeholder_id
: "spanButtonPlaceholder", button_width:
101, button_height:
22, button_text
: buttonText, button_text_style
: '.button
{ font-family: 华文行楷,宋体, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', button_text_top_padding:
1, button_text_left_padding:
20, flash_url
: "/modules/commons/js/swfupload/swfupload.swf", custom_settings
: { upload_target
: "divFileProgressContainer" }, debug:
false }); if(thumbnailScroll){ var divThumbnails=document.getElementById("thumbnails"); var divContent=document.getElementById("content"); divContent.style.width="400px"; divThumbnails.style.height='200px'; divThumbnails.style.overflowY="scroll"; divThumbnails.style.border="solid
1px #DDF0DD"; } document.getElementById("divButtonPlaceholder").style.textAlign=buttonAlign; if(componentHeight!=''){ componentHeight=componentHeight.replace("px",""); componentHeight=Number(componentHeight)-25;//去掉空隙和按钮高度 document.getElementById("fsProgress").style.height=componentHeight+"px"; }} |
其中MultiFileHandler.js是对于上传过程中各个事件的处理,MultiFileUpload.js是SWFUpload的使用,"$"符号开头的变量在实际使用过程中可以自由定制,另外在此还要提醒大家,。代码中的savePath变量是文件最后的保存路径,后台只要读取此变量保存到相应的位置即可。下面是后台代码:
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;namespace WebApplication1{ public partial class FileUpload
: System.Web.UI.Page { protected void Page_Load(object sender,
EventArgs e) { string path=""; HttpPostedFile
file= Request.Files["FileData"]; string relationPath=Request["savePath"]; if(relationPath!=string.Empty) { path=Server.MapPath("~/")+relationPath+"\\"+file.FileName; } file.SaveAs(path); Response.Write("success"); } }} |
需要注意的是在后台一定要给出返回值(例如上面代码中Response.Write("success"))否则SWFUpload就不认为是上传完成。
下面的实际效果:



8746

被折叠的 条评论
为什么被折叠?



