Javascript使用SWFUpload進(jìn)行多文件上傳

更新時(shí)間：2016年11月16日 10:27:45 作者：KenshinCui

本篇文章主要解釋了使用SWFUpload進(jìn)行多文件上傳，這里整理了詳細(xì)的代碼，有需要的可以了解一下。

SWFUpload可以說(shuō)是目前最好的多文件上傳工具之一，雖然它是基于flash插件開(kāi)發(fā)的，但是相比目前很多js多文件上傳還是具有很多優(yōu)點(diǎn)：

可以同時(shí)選擇多個(gè)文件上傳（注意是以此選擇文件）
無(wú)刷新上傳
可以顯示進(jìn)度條
良好的瀏覽器兼容性
兼容其他js類(lèi)庫(kù)

SWFUpload另個(gè)優(yōu)點(diǎn)就是它優(yōu)秀的設(shè)計(jì)，它提供了一組簡(jiǎn)明的JavaScript事件，借助它們開(kāi)發(fā)者可以方便的在文件上傳過(guò)程中更新頁(yè)面的內(nèi)容。

下面是SWFUpload在具體使用過(guò)程中js代碼
MultiFileHandler.js

function fileQueueError(file, errorCode, message) { 
  try { 
    var imageName = "error.gif"; 
    var errorName = ""; 
    if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { 
      errorName = "文件超過(guò)最大上傳個(gè)數(shù)！"; 
    } 
 
    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("正在創(chuàng)建縮略圖..."); 
      } 
      progress.toggleCancel(false, this); 
      uploadNum++; 
      setUploadNumber(uploadNum); 
    } else { 
      progress.setStatus("正在上傳中，已完成"+percent+"%"); 
      progress.toggleCancel(true, this); 
    } 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
//文件數(shù)據(jù)發(fā)送成功，不管是否成功保存;其serverData是否服務(wù)器端處理完以后的返回值 
//這里規(guī)定返回值必須為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("縮略圖創(chuàng)建完成！"); 
    } 
    if(sd!=''){ 
      if(sd!='success'){ 
        if(serverErrorInfo!=''){ 
          serverErrorInfo+='<br />'; 
        } 
        serverErrorInfo+=sd; 
        document.getElementById('divError').innerHTML=serverErrorInfo; 
      } 
    } 
    progress.toggleCancel(false); 
 
 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
//服務(wù)器端返回非空值才認(rèn)為上傳成功，觸發(fā)下面事件 
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>個(gè)文件)"; 
} 
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}'; //是否顯示縮略圖，一般用于圖片上傳，默認(rèn)為false 
var thumbnailScroll='$!{request.thumbnailScroll}';//縮略圖部分是否顯示滾動(dòng)條 
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是對(duì)于上傳過(guò)程中各個(gè)事件的處理，MultiFileUpload.js是SWFUpload的使用，"$"符號(hào)開(kāi)頭的變量在實(shí)際使用過(guò)程中可以自由定制，另外在此還要提醒大家，。代碼中的savePath變量是文件最后的保存路徑，后臺(tái)只要讀取此變量保存到相應(yīng)的位置即可。下面是后臺(tái)代碼：

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"); 
    } 
  } 
}

需要注意的是在后臺(tái)一定要給出返回值（例如上面代碼中Response.Write("success")）否則SWFUpload就不認(rèn)為是上傳完成。

下面的實(shí)際效果：