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 Settingsupload_url: '@Url.Action("AjaxUploadPic")', //网上说一定要是绝对路径//                    post_params: { "name": "value", "name": "value" }, //上传时可提交参数post_params: {"ASPSESSID": "<%=Session.SessionID %>",},use_query_string: false,// File Upload Settingsfile_size_limit: "200 MB", //文件最大值file_types: "*.*", //文件类型,file_types_description: "JPG Images",file_upload_limit: "10", //Zero means unlimitedfile_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 settingsbutton_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 Settingsflash_url: '@Url.Content("~/Scripts/Swfupload/swfupload.swf")',custom_settings: { upload_target: "divFileProgressContainer" },//Debug Settingsdebug: 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 fpsif (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;" οnclick="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 %>",
}

posted on 2014-08-13 13:25 铭轩同学 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/mingxuantongxue/p/3909914.html

SWFUpload批量上传插件相关推荐

  1. 基于jQuery很牛X的批量上传插件

    上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...

  2. diyUpload - jQuery多张图片批量上传插件

    下载地址 一款支持多个图片文件批量上传插件代码下载,下载包里有服务端获取图片方法,是php语言./** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;* 其他参数同WebUpl ...

  3. php图片批量上传插件下载,jQuery的多图片批量上传插件

    jQuery的多图片批量上传插件 js代码 $(function(){ //上传图片 var $tgaUpload = $('#goodsUpload').diyUpload({ url:'uploa ...

  4. jQuery图片批量上传插件源码,支持批量上传、预览、删除、放大,可配置上传数量、上传大小、追加方式,含详细使用文档

    jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档 程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码 上传前 ...

  5. php图片批量上传插件下载,vue.js图片批量上传插件

    vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...

  6. jQuery图片批量上传插件

    下载地址 jQuery图片批量上传网页插件,可以实现上传图片预览拖拽排序,编辑图片功能支持多个多图上传功能特效. dd:

  7. php 批量上传图片插件,ajaxImageUpload——一个jQuery图片批量上传插件

    ajaxImageUpload 原创jQuery图片上传插件,支持批量上传.预览.删除.放大.上传数量.上传大小.追加方式配置以及上传前.上传中和上传后的回调函数. 演示地址:http://www.g ...

  8. 批量上传插件(flash,html5,jquery)

    1.jQuery File Upload 官网:http://blueimp.github.com/jQuery-File-Upload/ 在线示例:http://blueimp.github.com ...

  9. java ajax多文件上传插件_jQuery Upload File 多文件批量上传插件 - 资源

    jQuery File UPload 包含多个带有进度条的文件上传,能够兼容任意的服务端语言,例如 PHP.Python.Ruby on Rails.Java等,支持标准的HTML表单文件上传.jQu ...

  10. php swfupload handlers.js,SWFUpload 文件上传插件常用的配置讲解

    上传文件swfUpload 插件: 基本的文件上传涉及到的四个文件  (还有一个处理数据的php文件  这里没有涉及到) html页面: upload_window.html js文件: swfupl ...

最新文章

  1. 3. Android框架和工具之 xUtils(BitmapUtils)
  2. Python和SQL Server 2017的力量
  3. 利用 async amp; await 的异步编程
  4. sersync+rsync实现实时同步
  5. 定时跑视图往另外一张表添加数据_程序猿删库跑路示例
  6. you just 飞鸽传书2007绿色版 ever day for two years
  7. php网站导航-国际网址导航系统 v5.0源码
  8. puppet 学习总结(1)——puppet 入门详解
  9. 新代数控系统编程说明书_数控加工中心编程快速入门教程
  10. 拓端tecdat|R语言arima,向量自回归(VAR),周期自回归(PAR)模型分析温度时间序列
  11. python 类 内置方法_类相关内置方法
  12. 巴菲特致股东的一封信:1991年
  13. 面向民航的航空数据链协议解析应用研究
  14. 热门股权转让项目:临沂泰森置业发展有限公司70%股权转让
  15. 记录使用Elasticsearch报错:FORBIDDEN/12/index read-only / allow delete (api)];]; nested exception is Elasti
  16. 主流射频半导体材料及特性介绍
  17. 什么是似然函数?是条件概率吗?
  18. OpenGL,GLUT,FreeGLUT,GLFW,GLEW,GLAD,GL3W,GLAD,GLM,GLSL的区别详解
  19. 记一次投票系统维护以及防止刷票springboot+redis
  20. redis防火墙设置

热门文章

  1. skywalking-安装部署
  2. LM2596数控电路原理分析
  3. 腾讯云图灵机器人接入微信号
  4. python实部和虚部_Python复数表示表示和计算
  5. 中国知网论文free下载的方法
  6. Java前景如何,容易找工作嘛
  7. c语言中内存分配方式
  8. 传感器实验——超声波测距
  9. mysql schemata 链接_MYSQL联合注入
  10. 数据传输服务器系统图,档案数字化管理系统