SWFUpload批量上传插件

2022-11-14 20:08:34

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 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 %>",

}

码农公寓

相关文章