Javascript使用SWFUpload进行多文件上传

JavaScript 2019-01-06

SWFUpload可以说是目前最好的多文件上传工具之一，虽然它是基于flash插件开发的，但是相比目前很多js多文件上传还是具有很多优点：

  • 可以同时选择多个文件上传（注意是以此选择文件）
  • 无刷新上传
  • 可以显示进度条
  • 良好的浏览器兼容性
  • 兼容其他js类库

SWFUpload另个优点就是它优秀的设计，它提供了一组简明的JavaScript事件，借助它们开发者可以方便的在文件上传过程中更新页面的内容。

下面是SWFUpload在具体使用过程中js代码 MultiFileHandler.js

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("正在创建<a href="https://www.jb51.cc/tag/suoluetu/" target="_blank" class="keywords">缩略图</a>..."); 
  } 
  progress.toggleCancel(false,this); 
  uploadNum++; 
  setUploadNumber(uploadNum); 
} else { 
  progress.setStatus("正在<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>中，已完成"+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,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","#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 <a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>wser 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 progre<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>ext = document.createElement("div"); 
progre<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>ext.className = "progressName"; 
progre<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>ext.appendChild(document.createTextNode(file.name)); 

var progressBar = document.createElement("div"); 
progressBar.className = "progressBarInProgress"; 

var progres<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>atus = document.createElement("div"); 
progres<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>atus.className = "progressBarStatus"; 
progres<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>atus.innerHTML = " "; 

this.fileProgressElement.appendChild(progressCancel); 
this.fileProgressElement.appendChild(progre<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>ext); 
this.fileProgressElement.appendChild(progres<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>atus); 
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

rush: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变量是文件最后的保存路径，后台只要读取此变量保存到相应的位置即可。下面是后台代码：

rush:csharp;"> 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

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

swfupload上传文件swfupload多图片上传swfupload多文件上传

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...