最近弄项目需要一个异步的图片上传图片组件，首先选择了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();   //上传文件的URLHttpPostedFile 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 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);}
}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张兄那里去下载，然后用我的代码替换相应的部分即可，水平有限让各位高手见笑了。

在 .Net 中使用 Plupload 上传图片相关推荐

  1. ASP.NET 中使用 Plupload 上传图片

    最近弄项目需要一个异步的图片上传图片组件,首先选择了 swfupload,但是在使用中发现火狐下莫名其妙的会丢失 Session(不使用 global.asax 的情况下,没有找到完美的解决方案),后 ...

  2. axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 ...

  3. Android中使用OKHttp上传图片，从相机和相册中获取图片并剪切

    Android中使用OKHttp上传图片,从相机和相册中获取图片并剪切 效果: 注意: 1:网络权限 <uses-permission android:name="android.pe ...

  4. 您的浏览器暂不支持计算机上传文件的大小,电脑中谷歌浏览器无法上传图片的解决方法...

    谷歌浏览器能够给我们带来很棒的网页浏览体验,不过用户在使用过程中也会遇到一些问题.比如,最近一位用户反馈电脑中谷歌浏览器无法上传图片,这该怎么办呢?接下来,就随系统城小编一起看看该问题的具体解决方法. ...

  5. 在vue中获取input上传图片的宽和高

    在vue中获取input上传图片的宽和高 上代码 思路 项目中有一个需求是需要上传190px*192px的png图片,一般直接在files.input[0]里面是找不到的,所以要变个思路了. 上代码 ...

  6. Django项目中使用plupload插件实现上传图片功能

    首先下载plupload插件放在static静态文件下面,官方地址:https://www.plupload.com/ 项目根目录下创建media文件夹用来存放上传的图片,配置settings文件,添 ...

  7. vue 项目中使用wangEditor上传图片视频到oos

    废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...

  8. Vue3.0中WangEditor本地上传图片（解决跨域问题，后端返回问题）

    官方文档:http://www.wangeditor.com/ 编辑器自带上传网络链接图片本地上传图片需要自己设置 效果: 注意事项: 1.自定义上传方法来上传图片,使用FromData对象来传参,但 ...

  9. Android中拍照(相册中选择)并上传图片功能（包括动态获取权限）

    作为新手小白,为了实现这个拍照和相册选取图片并上传功能,确实花费了很多时间,因为实现不容易,所以记录下来,一和大家分享,二为之后学习做个备忘. 一.实现效果 二. 整体思路 Android手机客户端, ...

最新文章

  1. 详解Java解析XML的四种方法
  2. mysql--------命令来操作表
  3. 世界机器人大会特种机器人报到高难度的高危险的活让它们来！
  4. Synbak 2.1 发布，系统备份工具
  5. x210烧写流程(inand)
  6. SpringBoot-HBase
  7. Jmeter-配置元件
  8. .NET框架源码解读之SSCLI编译过程简介
  9. 如何使用动软代码生成器连接oracle生成数据库设计文档
  10. 如何合并两个excel表格数据
  11. SSHD服务的搭建与管理
  12. 教你怎么用Mono Cecil - 动态注入 （注意代码的注释）
  13. ta点读笔客户端_点读笔到底哪支好？12款点读笔评测：看完不再稀里糊涂
  14. linux 共享硬盘分区,linux – 如何在多台计算机之间轻松共享本地分区
  15. “国家中小学智慧教育平台”是什么
  16. 列举组合的所有情况（多层嵌套for循环与递归）
  17. 软银集团计划针对日本国内散户发行45亿美元债券
  18. 配置Kafka发送大消息
  19. 甘肃省白银市谷歌卫星地图下载
  20. Maya export/inport error----Invalid file type specified

热门文章

  1. Uploadify 上传插件引起Chrome崩溃解决方法
  2. 前谷歌高管给初入职场新人的14条忠告
  3. 用eclipse生成可运行jar包、启动jar包及常见错误
  4. 简单的批处理命令（一）
  5. 文件系统管理 之 Linux 创建文件系统及挂载文件系统流程详解
  6. 提示框一段时间以后消失setTimeout
  7. 创建Maven的Web工程
  8. AngularJS之Filter（二）
  9. Mybatis之批量更新操作
  10. 排序算法（插入、快速、归并）java实现