Javascript使用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+='<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}';//上传处理的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",
    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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。