首页 > 代码库 > SWFUpload批量上传插件
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="http://www.mamicode.com/@Url.Content("~/Scripts/Swfupload/swfupload.js")" type="text/javascript"></script>
<script src="http://www.mamicode.com/@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=http://www.mamicode.com/‘" + 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 = http://www.mamicode.com/src;"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 = "http://www.mamicode.com/#"; 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 = http://www.mamicode.com/file.name;"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="http://www.mamicode.com/确定上传" 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="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></li> <li><img src="http://www.mamicode.com/Content/CenterImages/upload_image.png" /></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 = http://www.mamicode.com/cookie_value;>而在前台页面的代码中，加入如下参数选项：
post_params: { "ASPSESSID": "<%=Session.SessionID %>",}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。