本篇文章主要解释了使用SWFUpload进行多文件上传，这里整理了详细的代码，有需要的可以了解一下。
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+='
'; } 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 = 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="文件上传(已上传"+num+"个文件)"; } 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}';//上传处理的url var 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}'; //是否显示缩略图，一般用于图片上传，默认为false var 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-600", 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就不认为是上传完成。
下面的实际效果：
原文链接：http://blog.csdn.net/jianxin160/article/details/7029207
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是Javascript使用SWFUpload进行多文件上传的详细内容，更多请关注本站其它相关文章！
