SWFUpload批量上传插件

SWFUpload是一个批量上传插件，在HTML4.1里面，估计也只有Flash+javascript配合才能够做到了。先复制个重要的网址，这个应该是官方的文档了，相当齐全。

http://leeon.me/upload/other/swfupload.html#uploadStart

这个是格式比较好看的。

http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html

算了，这个文档的内容太多，各种属性各种方法，记不了这么多，直接贴上个实例算了。

前台是视图javascript代码：

　　　<script src="@Url.Content("~/Scripts/Swfupload/swfupload.js")" type="text/javascript"></script>
　　　<script src="@Url.Content("~/Scripts/Swfupload/handlers.js")" charset="utf-8" type="text/javascript"></script>

　　<script type="text/javascript">
            var swfu;
            $(function () {
                swfu = new SWFUpload({

                    //Backend Settings
                    upload_url: '@Url.Action("AjaxUploadPic")', //网上说一定要是绝对路径
                    //                    post_params: { "name": "value", "name": "value" }, //上传时可提交参数
                    post_params: {
                        "ASPSESSID": "<%=Session.SessionID %>",
                    },
                    use_query_string: false,
                    // File Upload Settings
                    file_size_limit: "200 MB", //文件最大值
                    file_types: "*.*", //文件类型，
                    file_types_description: "JPG Images",
                    file_upload_limit: "10", //Zero means unlimited
                    file_queue_limit: "10", //只允许一个文件

                    //文件上传事件驱动，冒号后边是函数（方法），方法放到 handlers.js 里面了，方便管理。
                    file_queue_error_handler: fileQueueError,
                    file_dialog_complete_handler: fileDialogComplete,
                    file_queued_handler: fileQueued,
                    upload_progress_handler: uploadProgress, //文件上传过程中定时触发，可用来显示上传进度
                    upload_error_handler: uploadError, //上传失败触发
                    upload_success_handler: uploadSuccess, //上传成功触发
                    upload_complete_handler: uploadComplete, //上传成功和失败都会触发
                    upload_start_handler: uploadStart, //上传前触发，一般可用来初始化提交参数

                    //FlashButton settings
                    button_image_url: '@Url.Content("~/Scripts/Swfupload/images/112.jpg")', //flash按钮背景，注意自己的路径。
                    button_placeholder_id: "spanButtonPlaceholder", //页面存放按钮的容器
                    button_width: 200,
                    button_height: 51,
                    button_text: '<span class="buttonCss"></span>', //按钮文本
                    button_text_style: ".button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }", //按钮文本样式
                    button_text_top_padding: 1,
                    button_text_left_padding: 5,
                    button_cursor: SWFUpload.CURSOR.HAND,
                    button_action: SWFUpload.BUTTON_ACTION.SELECT_FILES, //多文件上传 单文件上传设置，详细见中文说明,页面有连接

                    //Flash Settings
                    flash_url: '@Url.Content("~/Scripts/Swfupload/swfupload.swf")',

                    custom_settings: { upload_target: "divFileProgressContainer" },

                    //Debug Settings
                    debug: false
                });

            });
       
    </script>

handle处理javascript代码：

var fileCount;
function fileQueueError(file, errorCode, message) {
    //alert(file.name + message);
    try {
        var imageName = "error.gif";
        var errorName = "";
        if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
            errorName = "You have attempted to queue too many files.";
        }

        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("images/" + imageName);

    } catch (ex) {
        this.debug(ex);
    }

}

function fileQueued(file) {

    try {

        var progress = new FileProgress(file, this.customSettings.upload_target);
        progress.setProgress(0);
        progress.toggleCancel(true, this);
            
    } catch (ex) {
        this.debug(ex);
    }
}

function uploadStart(file) {
    this.addPostParam("bank", $(".in").val());
}

function fileDialogComplete(numFilesSelected, numFilesQueued) {
    try {
        if (numFilesQueued > 0) {
            fileCount = numFilesQueued;
            if ($("#itemId").val() == "") {
                alert("Please save the basic information First!");
            }
            else {
                this.addPostParam("itemId", $("#itemId").val());
                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) {
            progress.toggleCancel(false, this);
        } else {
            progress.toggleCancel(true, this);
        }
    } catch (ex) {
        this.debug(ex);
    }
}

var imagesCount = -1;
function uploadSuccess(file, serverData) {
    imagesCount++;
    try {
        var image = strToJson(serverData);
        if (image.success == "0") {
            alert(image.name);
        }
        else {
            $(".album_list li").eq(imagesCount).find("img").attr("src", image.name);
        }

        var progress = new FileProgress(file, this.customSettings.upload_target);

        progress.toggleCancel(false);


    } catch (ex) {
        this.debug(ex);
    }
    //alert(serverData);
}

var iCount = 0;
function itemUpdateuploadSuccess(file, serverData) {
        iCount++;
        var image = strToJson(serverData);
        if (image.success == "0") {
            alert(image.name);
        }
        else {
            var dom = $("<li><img src='" + image.name + "' alt='' /></li>");
            $(".album_list").append(dom);
        }
        if (iCount == fileCount) { 
            alert("upload success!")
        }

        var progress = new FileProgress(file, this.customSettings.upload_target);

        progress.toggleCancel(false);
}


function strToJson(str) {
    var json = (new Function("return " + str))();
    return json;
}

function uploadComplete(file) {
    try {

        var progress = new FileProgress(file, this.customSettings.upload_target);
        progress.setComplete();
        if (this.getStats().files_queued > 0) {
            this.startUpload();
        } else {
            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.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.toggleCancel(true);
                }
                catch (ex2) {
                    this.debug(ex2);
                }
            case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
                imageName = "uploadlimit.gif";
                break;
            default:
                alert(message);
                break;
        }

        addImage("images/" + imageName);

    } catch (ex3) {
        this.debug(ex3);
    }

}


function addImage(src) {
    var newImg = document.createElement("img");
    newImg.style.margin = "5px";

    document.getElementById("thumbnails").appendChild(newImg);
    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);
    }
}



/* ******************************************
*    FileProgress Object
*    Control object for displaying file info
* ****************************************** */

function FileProgress(file, targetID) {
    if (file.filestatus != -5) {
        this.fileProgressID = file.id;

        this.fileProgressWrapper = document.getElementById(this.fileProgressID);

        if (this.fileProgressWrapper == null) {
            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.innerHTML = "delete";

            var progressText = document.createElement("div");
            progressText.className = "progressName";
            progressText.appendChild(document.createTextNode(file.name + " (" + (file.size / 1024000).toFixed(2) + " MB)"));

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

            var progressStatus = document.createElement("div");
            progressStatus.className = "progressBarStatus";

            this.fileProgressElement.appendChild(progressText);
            this.fileProgressElement.appendChild(progressStatus);
            progressStatus.appendChild(progressBar);
            this.fileProgressElement.appendChild(progressCancel);

            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[1].childNodes[0].className = "progressBarInProgress";
    this.fileProgressElement.childNodes[1].childNodes[0].style.width = percentage + "%";
};
FileProgress.prototype.setComplete = function() {
    this.fileProgressElement.className = "progressContainer blue";
    this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarInProgress";
    this.fileProgressElement.childNodes[1].childNodes[0].style.width = "100%";
    
    var progressOk = document.createElement("span");
    progressOk.className = "progressOk";
    progressOk.innerHTML = "ok";
    this.fileProgressWrapper.childNodes[0].appendChild(progressOk);

};
FileProgress.prototype.setError = function() {
    this.fileProgressElement.className = "progressContainer red";
    this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarError";
    this.fileProgressElement.childNodes[1].childNodes[0].style.width = "";

};
FileProgress.prototype.setCancelled = function() {
    this.fileProgressElement.className = "progressContainer";
    this.fileProgressElement.childNodes[1].childNodes[0].className = "progressBarError";
    this.fileProgressElement.childNodes[1].childNodes[0].style.width = "";

};
//FileProgress.prototype.setStatus = function(status) {
//    this.fileProgressElement.childNodes[2].innerHTML = status;
//};

FileProgress.prototype.toggleCancel = function(show, swfuploadInstance) {
    this.fileProgressElement.childNodes[2].style.display = show ? "block" : "none";
    if (swfuploadInstance) {
        var fileID = this.fileProgressID;
        var filePro = this.fileProgressElement.childNodes[2];
        filePro.onclick = function() {
            var f = document.getElementById(fileID);
            f.parentNode.removeChild(f);
            swfuploadInstance.cancelUpload(fileID);
            return false;
        };
    }
};

HTML代码：

                <div class="album">
                    <div>
                        <span>会员相册</span>
                        <div style="margin-left:480px;">
                            <span id="spanButtonPlaceholder" style="margin-left:300px">dddd</span>
                            <input type="button" value="确定上传" style="display:none;" onclick="javascript:swfu.startUpload()" />
                            <div id="divFileProgressContainer" style="display:none;"></div>
                        </div>
                        <div class="clear"></div>
                    </div>

                    <ul class="album_list">
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                        <li><img src="/Content/CenterImages/upload_image.png" alt="" /></li>
                    </ul>
                    <div class="clear"></div>
                </div>

控制器代码：

        public ActionResult AjaxUploadPic()
        {
            PublicCRUD_Respository CRUD = new PublicCRUD_Respository();
            HttpPostedFileBase PostedFile = null;
            PostedFile = HttpContext.Request.Files[0];
            string itemId = HttpContext.Request.Form["itemId"];
            int ItemId = -1;
            if (!string.IsNullOrEmpty(itemId))
            {
                ItemId = Convert.ToInt32(itemId);
            }

            if(ItemId == -1)
            {
                return Content("");
            }
            MariItemInfo Entity = CRUD.SelectById<MariItemInfo>(ItemId);
            if (Entity.Create.UserId != CurrentUser.UserId)
            {
                return Content("");
            }

            object json = null;
            if (PostedFile != null)
            {
                bool success;
                string result;
                int count = (int)CRUD.Select_Unique_BySQL("select count(ItemId) from Mari_ItemInfo_Album where itemId = " + ItemId);
                if (count < 10)
                {
                    result = UploadFile.SaveFile(PostedFile, UploadFile.PicPath, out success);
                    if (success)
                    {
                        FileInfo fileInfo = new FileInfo(result);
                        //路径存入数据库
                        if (ItemId != -1)
                        {
                            MariItemInfoAlbum AlbumEntity = new MariItemInfoAlbum();
                            AlbumEntity.CreateTime = DateTime.Now;
                            AlbumEntity.Pic = UploadFile.UrlConvertor(fileInfo.FullName);
                            AlbumEntity.PicStatus = true;
                            AlbumEntity.PicQuality = 10;
                            MariItemInfo ItemEntity = new MariItemInfo();
                            ItemEntity.ItemId = ItemId;
                            AlbumEntity.MariItemInfo = ItemEntity;
                            CRUD.Insert<MariItemInfoAlbum>(AlbumEntity);
                        }
                        json = new { success = 1, name = UploadFile.UrlConvertor(fileInfo.FullName) };
                    }
                    else
                    {
                        json = new { success = 0, name = "图片保存失败" };
                    }
                }
                else
                {
                    json = new { success = 0, name = "一个用户最多只能上传10张图片!" };
                }

            }
            else
            {
                json = new { success = 0 };
            }
            return Json(json, "text/html", JsonRequestBehavior.AllowGet);
        }

　　值得说的是，当页面需要Session验证才能操作的时候在Chrome和火狐浏览器里会上传不了，据说是Session的问题，这个时候可以在Global.asax里面加入下段代码：

        protected void Application_Start()
        {
            //火狐，谷歌批量上传兼容
            Matchmaking.Infrastructure.SwfUploadCompatible.FireFoxCompatible();

            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

 

        public static void FireFoxCompatible()
        {
            try
            {
                string session_param_name = "ASPSESSID";
                string session_cookie_name = "ASP.NET_SESSIONID";

                if (HttpContext.Current.Request.Form[session_param_name] != null)
                {
                    UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
                }
                    else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
                    {
                        UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
                    }
                }
                catch (Exception)
                { }
        }

        public static void UpdateCookie(string cookie_name, string cookie_value)
        {
            HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
            if (cookie == null)
            {
                HttpCookie cookie1 = new HttpCookie(cookie_name, cookie_value);
                System.Web.HttpContext.Current.Response.Cookies.Add(cookie1);
            }
            else
            {
                cookie.Value = cookie_value;
                HttpContext.Current.Request.Cookies.Set(cookie);
            }
        }

而在前台页面的代码中，加入如下参数选项：

post_params: {
　　"ASPSESSID": "<%=Session.SessionID %>",
}