SWFUpload批量上传插件

拼搏现实的明天。 2022-04-10 08:48 269阅读 0赞

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

[http://leeon.me/upload/other/swfupload.html\#uploadStart][http_leeon.me_upload_other_swfupload.html_uploadStart]

这个是格式比较好看的。

[http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html][http_www.cnblogs.com_2050_archive_2012_08_29_2662932.html]

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

前台是视图javascript代码：

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代码：

控制器代码：

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

[http_leeon.me_upload_other_swfupload.html_uploadStart]: http://leeon.me/upload/other/swfupload.html#uploadStart
[http_www.cnblogs.com_2050_archive_2012_08_29_2662932.html]: http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html