JQuery插件：批量上传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 %>",}