.Net中使用Plupload详解(asp.net版)
来源：互联网 发布：matlab画三维数组 编辑：程序博客网 时间：2024/06/04 09:49
最近弄项目需要一个异步的图片上传图片组件，首先选择了swfupload，但是在使用中发现火狐下莫名其妙的会丢失Session（不使用global.asax的情况下，没有找到完美的解决方案），后来找到了Plupload，便去了解了一下。
Plupload官网：http://www.plupload.com
它是一个开源组件！功能的确很强大！
它主要功能是多文件上传，并提供图片客户端尺寸压缩。主要的特色是可以使用 Flash Gears HTML 5 Silverlight BrowserPlus HTML 4 等多项技术实现！
官网上的实例是用php写的，后来在http://www.cnblogs.com/zjfree/archive/2010/12/27/1918400.html找到了.net版的，我根据自己的需求做了些调整，美化了一下界面样式，调整了js代码，自己写了后台代码。
这是我参考了swfupload上传之后在页面上显示缩略图的效果图。
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>\</title> <script language="javascript" type="text/javascript" src="/Static/Script/plupload/jquery.plupload.queue.min.js"></script> <script language="javascript" type="text/javascript" src="/Static/Script/plupload/plupload.min.js"></script> <script language="javascript" type="text/javascript" src="/Static/Script/plupload/plupload.flash.min.js"></script></head><body> <div id="flash_uploader" style="width: 600px; height: 330px;"> 请检查您的Flash插件是否正确安装！</div> <div id="thumbnails"> </div> <script type="text/javascript"> $(function () { // 初始化Flash上传插件 $("#flash_uploader").pluploadQueue({ runtimes: 'flash', //使用Flash插件 url: '/Services.aspx?act=Upload', //服务器端响应页面 max_file_size: '10mb', //最大文件限制 file_size: '1mb', //一次上传数据大小 unique_names: true, //是否自动生成唯一名称 filters: [//文件类型限制{title: "图片文件", extensions: "jpg,gif,png" },{ title: "压缩文件", extensions: "zip,rar" }], // 缩放图片 // resize: { width: 320, height: 240, quality: 80 }, // SWF文件位置 flash_swf_url: '/Static/Script/plupload/plupload.flash.swf', init: { FileUploaded: function (up, file, info) { if (info.response != null) { var jsonstr = eval("(" + info.response + ")"); var thumbnailUrl = jsonstr[0].thumbnailUrl; var originalUrl = jsonstr[0].originalUrl; var name = jsonstr[0].name; //一个文件上传成功 addImage(name, originalUrl, thumbnailUrl); } }, Error: function (up, args) { //发生错误 if (args.file) { alert('[error] File:' + args.file); } else { alert('[error]' + args); } } } }); }); </script></body></html>后台代码：
HttpContext context = HttpContext.Current; string savePath = PathConfig.UploadPath(); //上传文件的路径 string uploadFileUrl = PathConfig.UploadUrl(); //上传文件的URL HttpPostedFile uploadFile = context.Request.Files["file"]; try { //验证文件夹是否存在 if (!Directory.Exists(savePath)) { Directory.CreateDirectory(savePath); } string fileName = uploadFile.FileName; string name = DateTime.Now.ToString("yyyyMMddHHmmssfff"); if (fileName.LastIndexOf(".") > -1) { string fileExt = fileName.Substring(fileName.LastIndexOf(".")); string saveName = name + fileExt; uploadFile.SaveAs(savePath + saveName); string originalUrl = uploadFileUrl + saveName; Image original_image = Image.FromStream(uploadFile.InputStream); string thumbnail_id = name; MemoryStream ms = new MemoryStream(); ms = ImageProcess.MakeThumbnail(original_image, 100, 100); Image thumbnail = Image.FromStream(ms); string imagePath = savePath + name + "-Thumbnail" + fileExt; thumbnail.Save(imagePath, System.Drawing.Imaging.ImageFormat.Jpeg); ThumbnailInfo thumb = new ThumbnailInfo(thumbnail_id, ms.GetBuffer()); string thumbnailUrl = uploadFileUrl + name + "-Thumbnail" + fileExt; List<ThumbnailInfo> thumbnails = context.Session["file_info"] as List<ThumbnailInfo>; if (thumbnails == null) { thumbnails = new List<ThumbnailInfo>(); context.Session["file_info"] = thumbnails; } thumbnails.Add(thumb); context.Response.StatusCode = 200; context.Response.Write("[{'name':'" + name + "','originalUrl':'" + originalUrl + "','thumbnailUrl':'" + thumbnailUrl + "'}]"); } else { context.Response.StatusCode = 500; context.Response.Write("error"); context.Response.End(); }jquery.plupload.queue.min.js代码：
(function (c) { var d = {}; function a(e) { return plupload.translate(e) || e } function b(f, e) { e.contents().each(function (g, h) { h = c(h); if (!h.is(".plupload")) { h.remove() } }); e.prepend('<div class="plupload_wrapper plupload_scroll"><div id="'+ f+ '_container" class="plupload_container"><div class="plupload"><div class="plupload_content"><div class="plupload_filelist_header"><div class="plupload_file_name">'+ a("文件名称")+ '</div><div class="plupload_file_action"> </div><div class="plupload_file_status"><span>'+ a("文件状态")+ '</span></div><div class="plupload_file_size">'+ a("文件大小")+ '</div><div class="plupload_clearer"> </div></div><ul id="'+ f+ '_filelist" class="plupload_filelist"></ul><div class="plupload_filelist_footer"><div class="plupload_file_name"><div class="plupload_buttons"><a href="#" class="plupload_button plupload_add">'+ a("添加文件")+ '</a><a href="#" class="plupload_button plupload_start">'+ a("开始上传")+ '</a></div><span class="plupload_upload_status"></span><div class="plupload_progress"><div class="plupload_progress_container"><div class="plupload_progress_bar"></div></div></div></div><div class="plupload_file_action"></div><div class="plupload_file_status"><span class="plupload_total_status">0%</span></div><div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div><div class="plupload_clearer"> </div></div></div></div></div><input type="hidden" id="'+ f+ '_count" name="'+ f+ '_count" value="0" /></div>') } c.fn.pluploadQueue = function (e) { if (e) { this.each(function () { var j, i, k; i = c(this); k = i.attr("id"); if (!k) { k = plupload.guid(); i.attr("id", k) } j = new plupload.Uploader(c.extend({ dragdrop: true, container: k }, e)); d[k] = j; function h(l) { var m; if (l.status == plupload.DONE) { m = "plupload_done" } if (l.status == plupload.FAILED) { m = "plupload_failed" } if (l.status == plupload.QUEUED) { m = "plupload_delete" } if (l.status == plupload.UPLOADING) { m = "plupload_uploading" } c("#" + l.id).attr("class", m).find("a").css("display","block") } function f() { c("span.plupload_total_status", i).html(j.total.percent+ "%"); c("div.plupload_progress_bar", i).css("width",j.total.percent + "%"); c("span.plupload_upload_status", i).text("已上传 "+ j.total.uploaded + "/" + j.files.length+ " 文件。") } function g() { var m = c("ul.plupload_filelist", i).html(""), n = 0, l; c.each(j.files, function (p, o) { l = ""; if (o.status == plupload.DONE) { if (o.target_name) { l += '<input type="hidden" name="' + k + "_"+ n + '_tmpname" value="'+ plupload.xmlEncode(o.target_name)+ '" />' } l += '<input type="hidden" name="' + k + "_" + n+ '_name" value="'+ plupload.xmlEncode(o.name) + '" />'; l += '<input type="hidden" name="'+ k+ "_"+ n+ '_status" value="'+ (o.status == plupload.DONE? "done": "failed") + '" />'; n++; c("#" + k + "_count").val(n) } m.append('<li id="'+ o.id+ '"><div class="plupload_file_name"><span>'+ o.name+ '</span></div><div class="plupload_file_action"><a href="#"></a></div><div class="plupload_file_status">'+ o.percent+ '%</div><div class="plupload_file_size">'+ plupload.formatSize(o.size)+ '</div><div class="plupload_clearer"> </div>'+ l + "</li>"); h(o); c("#" + o.id + ".plupload_delete a").click(function (q) { c("#" + o.id).remove(); j.removeFile(o); q.preventDefault() }) }); c("span.plupload_total_file_size", i).html(plupload.formatSize(j.total.size)); if (j.total.queued === 0) { c("span.plupload_add_text", i).text(a("Add files.")) } else { c("span.plupload_add_text", i).text(j.total.queued+ " files queued.") } c("a.plupload_start", i).toggleClass("plupload_disabled",j.files.length == (j.total.uploaded + j.total.failed)); m[0].scrollTop = m[0].scrollHeight; f(); if (!j.files.length && j.features.dragdrop&& j.settings.dragdrop) { c("#" + k + "_filelist").append('<li class="plupload_droptext">'+ a("Drag files here.") + "</li>") } } j.bind("UploadFile", function (l, m) { c("#" + m.id).addClass("plupload_current_file") }); j.bind("Init", function (l, m) { b(k, i); if (!e.unique_names && e.rename) { c("#" + k + "_filelist div.plupload_file_name span", i).live("click", function (s) { var q = c(s.target), o, r, n, p = ""; o = l.getFile(q.parents("li")[0].id); n = o.name; r = /^(.+)(\.[^.]+)$/.exec(n); if (r) { n = r[1]; p = r[2] } q.hide().after('<input type="text" />'); q.next().val(n).focus().blur(function () { q.show().next().remove()}).keydown(function (u) { var t = c(this); if (u.keyCode == 13) { u.preventDefault(); o.name = t.val()+ p; q.text(o.name); t.blur() }})}) } c("a.plupload_add", i).attr("id", k + "_browse"); l.settings.browse_button = k + "_browse"; if (l.features.dragdrop && l.settings.dragdrop) { l.settings.drop_element = k + "_filelist"; c("#" + k + "_filelist").append('<li class="plupload_droptext">'+ a("Drag files here.") + "</li>") } c("#" + k + "_container").attr("title", ""); c("a.plupload_start", i).click(function (n) { if (!c(this).hasClass("plupload_disabled")) { j.start() } n.preventDefault() }); c("a.plupload_stop", i).click(function (n) { n.preventDefault(); j.stop() }); c("a.plupload_start", i).addClass("plupload_disabled") }); j.init(); j.bind("Error", function (l, o) { var m = o.file, n; if (m) { n = o.message; if (o.details) { n += " (" + o.details + ")" } if (o.code == plupload.FILE_SIZE_ERROR) { alert(a("Error: File to large: ") + m.name) } if (o.code == plupload.FILE_EXTENSION_ERROR) { alert(a("Error: Invalid file extension: ") + m.name) } c("#" + m.id).attr("class", "plupload_failed").find("a").css("display", "block").attr("title", n) } }); j.bind("StateChanged", function () { if (j.state === plupload.STARTED) { c("li.plupload_delete a,div.plupload_buttons", i).hide(); c("span.plupload_upload_status,div.plupload_progress,a.plupload_stop",i).css("display", "block"); c("span.plupload_upload_status", i).text("已上传 "+ j.total.uploaded + "/" + j.files.length+ " 文件"); if (e.multiple_queues) { c("span.plupload_total_status,span.plupload_total_file_size",i).show() } } else { g(); c("a.plupload_stop,div.plupload_progress", i).hide(); c("a.plupload_delete", i).css("display", "block") } }); j.bind("QueueChanged", g); j.bind("FileUploaded", function (l, m) { h(m) }); j.bind("UploadProgress", function (l, m) { c("#" + m.id + " div.plupload_file_status", i).html(m.percent + "%"); h(m); f(); if (e.multiple_queues&& j.total.uploaded + j.total.failed == j.files.length) { c(".plupload_buttons,.plupload_upload_status", i).css("display", "inline"); c(".plupload_start", i).addClass("plupload_disabled"); c("span.plupload_total_status,span.plupload_total_file_size",i).hide() } }); if (e.setup) { e.setup(j) } }); return this } else { return d[c(this[0]).attr("id")] } }})(jQuery);function addImage(name,originalUrl, thumbnailUrl) { var newImg = document.createElement("img"); newImg.style.margin = "5px"; newImg.setAttribute("class", "thumbnail"); newImg.setAttribute("onclick", "InsertImages('" + name + "','" + originalUrl + "', '" + thumbnailUrl + "')"); 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 = thumbnailUrl; // alert(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); }}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.setStatus("Cancelled"); 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.setStatus("Stopped"); progress.toggleCancel(true); } catch (ex2) { this.debug(ex2); } case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: imageName = "uploadlimit.gif"; break; default: alert(message); break; } addImage("/Static/Images/swfupload/" + imageName); } catch (ex3) { this.debug(ex3); }}这是我用的样式代码：
/* Plupload------------------------------------------------------------------- */.plupload_button { display: -moz-inline-box; /* FF < 3*/ display: inline-block; font: normal 12px sans-serif; text-decoration: none; color: #42454a; border: 1px solid #bababa; padding: 2px 8px 3px 20px; margin-right: 4px; background: #f3f3f3 url('/Static/Images/plupload/buttons.png') no-repeat 0 center; outline: 0; /* Optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }.plupload_button:hover { color: #000; text-decoration: none; }.plupload_disabled, a.plupload_disabled:hover { color: #737373; border-color: #c5c5c5; background: #ededed url('/Static/Images/plupload/buttons-disabled.png') no-repeat 0 center; cursor: default; }.plupload_add { background-position: -181px center; }.plupload_wrapper { font: normal 12px Verdana,sans-serif; width: 100%; }.plupload_container { padding: 8px 0px; background: url('/Static/Images/plupload/transp50.png'); /*-moz-border-radius: 5px;*/ }.plupload_container input { border: 1px solid #DDD; font: normal 11px Verdana,sans-serif; width: 98%; }.plupload_header { background: #2A2C2E url('/Static/Images/plupload/backgrounds.gif') repeat-x; }.plupload_header_content { background: url('/Static/Images/plupload/backgrounds.gif') no-repeat 0 -317px; min-height: 56px; padding-left: 60px; color: #FFF; }.plupload_header_title { font: normal 18px sans-serif; padding: 6px 0 3px; }.plupload_header_text { font: normal 12px sans-serif; }.plupload_filelist { margin: 0; padding: 0; list-style: none; border-left: 1px solid #99BBE8; border-right: 1px solid #99BBE8; }.plupload_scroll .plupload_filelist { height: 240px; background: #F5F5F5; overflow-y: scroll; }.plupload_filelist li { padding: 10px 8px; background: #F5F5F5 url('/Static/Images/plupload/backgrounds.gif') repeat-x 0 -156px; border-bottom: 1px solid #DDD; }.plupload_filelist_footer { background: #DFDFDF; padding: 8px 8px; color: #42454A; }.plupload_filelist_header { background: url("/Static/Images/plupload/grid3-hrow.gif") repeat-x scroll left bottom #F9F9F9; border-right: 1px solid #99BBE8; cursor: default; white-space: nowrap; padding: 8px; border-left: 1px solid #99BBE8; border-top: 1px solid #99BBE8; }#thumbnails { width: 700px; float: left; }.thumbnail { float: left; }.plupload_filelist_footer { background: url("/Static/Images/plupload/bg.gif") repeat-x scroll left top #D0DEF0; height: 22px; line-height: 20px; vertical-align: middle; border: 1px solid #99BBE8; }.plupload_file_name { float: left; overflow: hidden; width: 60%; }.plupload_upload_status { float:left;}.plupload_file_status { color: #777; }.plupload_file_status span { color: #42454A; }.plupload_file_size, .plupload_file_status, .plupload_progress { float: right; width: 15%; }.plupload_file_size, .plupload_file_status, .plupload_file_action { text-align: right; }.plupload_filelist .plupload_file_name { width: 60%; }.plupload_file_action { float: right; width: 16px; height: 16px; margin-left: 15px; }.plupload_file_action * { display: none; width: 16px; height: 16px; }li.plupload_uploading { background: #ECF3DC url('/Static/Images/plupload/backgrounds.gif') repeat-x 0 -238px; }li.plupload_done { color: #AAA; }li.plupload_delete a { background: url('/Static/Images/plupload/delete.gif'); }li.plupload_failed a { background: url('/Static/Images/plupload/error.gif'); cursor: default; }li.plupload_done a { background: url('/Static/Images/plupload/done.gif'); cursor: default; }.plupload_progress, .plupload_upload_status { display: none; }.plupload_progress_container { margin-top: 3px; border: 1px solid #CCC; background: #FFF; padding: 1px; }.plupload_progress_bar { width: 0px; height: 7px; background: #CDEB8B; }.plupload_file_action, .plupload_scroll .plupload_filelist_footer .plupload_file_action { margin-right: 17px; }/* Floats */.plupload_clear, .plupload_clearer { clear: both; }.plupload_clearer, .plupload_progress_bar { display: block; font-size: 0; line-height: 0; }li.plupload_droptext { background: transparent; text-align: center; vertical-align: middle; border: 0; line-height: 165px; }
addImage和uploadError 方法是我从swfupload中提取出来的，用于上传成功后自动显示缩略图的，
newImg.setAttribute("onclick", "InsertImages('" + name + "','" + originalUrl + "', '" + thumbnailUrl + "')");是我想点击图片后插入到编辑器中用的。
这应该算一个不完整的程序吧，因为上传失败的方法还没有进行处理，等过段时间我好好整理一下再发布上来，另外我没有上传附件，其他代码可以去xiao张兄那里去下载，然后用我的代码替换相应的部分即可，水平有限让各位高手见笑了。
0 0
- .Net中使用Plupload详解(asp.net版)
- 在.Net中使用Plupload
- asp.net使用plupload实现文件上传
- Using Plupload in ASP.NET
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解(引)
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解(引)
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解(引)
- Asp.net中GridView使用详解
- Asp.net中GridView使用详解(引)
- Android SDK 更新
- js操作IE浏览器弹出浏览文件夹
- POJ2956
- Android切换前后置摄像头并录制视频
- vim的复制和粘贴寄存器
- .Net中使用Plupload详解(asp.net版)
- 如何进行简单的功能仿制(网页制作)
- PythonGIS可视化—Matplot basemap工具箱
- How many ways
- POJ2965
- Linux学习小结（一）
- Java Properties类
- 关于php查询MySQL数据库的小细节
- C++输入一行字符串的一点小结
