使用SWFUpload进行多文件上传

于 2014-03-27 10:19:55 发布
阅读量571 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： swfupload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/echojson/article/details/22270863

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就不认为是上传完成。

下面的实际效果：

 swfUploadUI

fileUploading

uploaded

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值