Jquery plupload上传笔记（修改版）
找一个好的上传插件不容易啊，最近看好一个上传插件，查了些网上质料，自己做了些改动，记录下来，来彰显自己曾经屌丝过,这插件还不错，支持多个上传和预览
首先引用
<link href="~/css/plupload.css" rel="stylesheet" />@*plupload上传*@ <script src="~/Plupload/jquery.plupload.queue.min.js"></script> <script src="~/Plupload/plupload.min.js"></script> <script src="~/Plupload/plupload.flash.min.js"></script>
html代码
1 <div id='radioDigs'> 2 <div id="radioDig" title="选择你要上传的路径" style="width:auto;height:250px;padding:10px;"> 3 <h5></h5> 4 </div> 5 </div> 6 <br/> 7 <div class="NewP" style="text-align:center;width:80%;"> 8 <table style="text-align:center;width:100%;"> 9 <tr> 10 <td><h5>您选择的上传路径为 ： <span class='pathExplin'></span></h5></td> 11 <td><a href="#" class='newExplin' iconCls="icon-undo">重新选择上传路径</a></td> 12 </tr> 13 </table> 14 </div> 15 <br/> 16 <div id="flash_uploader" style="width: 850px; height: 500px;"> 17 18 </div> 19 <div id="thumbnails"></div> 20 <script type="text/javascript"> 21 var radioValue;//用于动态的获取单选框选中的值 22 function NewPlupload(){//重新选择上传路径 23 $('#radioDig').dialog({ 24 modal:true, 25 onClose:function(){ 26 radioValue = $('[name=ruploads]:checked').val(); 27 PluploadShow(); 28 } 29 }); 30 } 31 $(function () { 32 $.ajax({ 33 url:"/Home/Uploads", 34 //data:{}, 35 type:"GET", 36 dataType:"text", 37 success:function(data,status){ 38 $("#radioDig h5").html(data);//获取单项按钮 39 } 40 }); 41 $('#radioDig').dialog({ 42 modal:true, 43 buttons:[{ 44 text:'保存', 45 iconCls:'icon-ok', 46 //left:50, 47 handler:function(){ 48 radioValue = $('[name=ruploads]:checked').val(); 49 PluploadShow(); 50 $('#radioDig').dialog("close"); 51 } 52 },{ 53 text:'取消', 54 iconCls:'icon-no', 55 //left:50, 56 handler:function(){ 57 $('#radioDig').dialog("close"); 58 } 59 }] 60 }); 61 $.messager.show({ 62 title: "温馨提示", 63 msg: "上传图片尽量上传大小一致标准化的图片，以便修改！", 64 showType: 'show', 65 timeout: 5000 66 }); 67 $(".NewP .newExplin").click(function(){ 68 NewPlupload(); 69 }).linkbutton({ 70 plain:true 71 }); 72 }); 73 function PluploadShow(){//上传界面 74 $(".NewP .pathExplin").text(radioValue); 75 // 初始化Flash上传插件 76 $("#flash_uploader").pluploadQueue({ 77 runtimes: 'flash', //使用Flash插件 78 url: '/Home/Uploadify/Upload', //服务器端响应页面 79 max_file_size: '10mb', //最大文件限制 80 file_size: '1mb', //一次上传数据大小 81 multipart_params: { "path": radioValue}, //传到后台的参数 82 unique_names: true, //是否自动生成唯一名称 83 filters: [ //文件类型限制 84 { title: "图片文件", extensions: "jpg,gif,png,ico" }, 85 { title: "压缩文件", extensions: "zip,rar" } 86 ], 87 //resize: { width: 320, height: 240, quality: 80 },// 压缩图片的大小 88 // SWF文件位置 89 flash_swf_url: '/Plupload/plupload.flash.swf', 90 init: { 91 FileUploaded: function (up, file, info) { 92 if (info.response != null) { 93 var jsonstr = eval("(" + info.response + ")"); 94 for(var i = 0; i<jsonstr.length;i++){ 95 var thumbnailUrl = jsonstr[i].thumbnailUrl; 96 var originalUrl = jsonstr[i].originalUrl;//上传完整路径 97 var name = jsonstr[i].name;//图片名 98 //一个文件上传成功 99 addImage(name, originalUrl, thumbnailUrl); 100 } 101 } 102 }, 103 Error: function (up, args) { 104 //发生错误 105 if (args.file) { 106 alert('文件错误:' + args.file); 107 } else { 108 alert('出错' + args); 109 } 110 } 111 } 112 }); 113 } 114 </script>
上传类(ServiceUpload)
1 /// <summary> 2 /// 取得缩略图。 3 /// </summary> 4 public void OutputThumbnail() 5 { 6 HttpContext context = HttpContext.Current; 7 //string imageName = context.Request.QueryString["ThumbnailId"] as string; 8 //if (imageName != null) 9 //{ 10 List<ThumbnailInfo> thumbnails = (List<ThumbnailInfo>)context.Session["thumbnails"]; 11 // List<ThumbnailInfo> thumbnails = context.Session["thumbnails"] as List<ThumbnailInfo>; 12 if (thumbnails != null) 13 { 14 foreach (ThumbnailInfo thumbnail in thumbnails) 15 { 16 //if (thumbnail.Id == imageName) 17 //{ 18 context.Response.ContentType = "image/jpeg"; 19 context.Response.BinaryWrite(thumbnail.Data); 20 context.Response.End(); 21 return; 22 //} 23 } 24 } 25 26 //} 27 context.Response.StatusCode = 404; 28 context.Response.Write("没有创建"); 29 context.Response.End(); 30 } 31 32 #endregion 33 /// <summary> 34 /// 上传图片 35 /// </summary> 36 /// <returns></returns> 37 public void UploadImage(string path) 38 { 39 HttpContext context = HttpContext.Current; 40 string uploadPath =context.Request.MapPath(path);//图片上传的路径 41 string thumbsImagePath = uploadPath; 42 // string uploadFileUrl = PathConfig.UploadUrl(); //上传文件的URL 43 HttpPostedFile uploadFile = context.Request.Files["file"]; 44 try 45 { 46 //验证文件夹是否存在 47 if (!Directory.Exists(uploadPath)) 48 { 49 Directory.CreateDirectory(uploadPath); 50 } 51 52 string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff"); 53 54 string imagePath = uploadPath + fileName + ".Jpeg"; 55 Image originalImg = Image.FromStream(uploadFile.InputStream); 56 originalImg.Save(imagePath, System.Drawing.Imaging.ImageFormat.Jpeg); 57 58 Image thumbnail = ImageProcess.MakeThumbnail(originalImg, 80, 60, ThumbnailMode.ByWidth);//略缩图 59 string thumbsPath = uploadPath + fileName + "-Thumbs.Jpeg"; 60 thumbnail.Save(thumbsPath, System.Drawing.Imaging.ImageFormat.Jpeg); 61 62 MemoryStream thumbsStream = ImageProcess.MakeThumbnail(originalImg, 100, 100); 63 ThumbnailInfo thumbnailInfo = new ThumbnailInfo(fileName, thumbsStream.GetBuffer()); 64 thumbsStream.Close(); 65 66 List<ThumbnailInfo> thumbnails = (List<ThumbnailInfo>)context.Session["thumbnails"]; 67 if (thumbnails == null) 68 { 69 thumbnails = new List<ThumbnailInfo>(); 70 context.Session["thumbnails"] = thumbnails; 71 } 72 thumbnails.Add(thumbnailInfo); 73 context.Session["thumbnails"] = thumbnails; 74 context.Session["path"] = thumbsPath;//自加属性 75 context.Response.StatusCode = 200; 76 context.Response.Write("[{'name':'" + fileName + "','originalUrl':'" + PathConfig.GetVirtualPath(imagePath) + "','thumbnailUrl':'" + PathConfig.GetVirtualPath(thumbsPath) + "'}]"); 77 78 } 79 catch 80 { 81 context.Response.StatusCode = 500; 82 context.Response.Write("发生了一个错误"); 83 context.Response.End(); 84 } 85 }
略缩图类（ThumbnailInfo）
1 [Serializable] 2 public class ThumbnailInfo 3 { 4 5 #region Fields... 6 7 #endregion 8 9 #region Constructors... 10 11 /// <summary> 12 /// 初始化 <see cref="ThumbnailInfo"/> 类的新实例。 13 /// </summary> 14 public ThumbnailInfo() 15 { 16 17 } 18 19 /// <summary> 20 /// 初始化 <see cref="ThumbnailInfo"/> 类的新实例。 21 /// </summary> 22 public ThumbnailInfo(string id, byte[] data) 23 { 24 Id = id; 25 Data = data; 26 } 27 28 #endregion 29 30 #region Properties... 31 32 /// <summary> 33 /// 获取或设置缩略图的编号。 34 /// </summary> 35 public string Id { get; set; } 36 37 /// <summary> 38 /// 获取或设置缩略图的数据。 39 /// </summary> 40 public byte[] Data { get; set; } 41 } 42 }
后台代码
1 public string Uploads()//上传按钮 2 { 3 List<Upload> list = oMan.GetUploads(); 4 StringBuilder result = new StringBuilder(); 5 string c = "checked='checked'";//默认第一个选中 6 foreach (Upload u in list) 7 { 8 result.Append("<input type='radio' name='ruploads' " + c + " value='" + u.UploadPath + "'/> " + u.UploadName + "<br/>"); 9 if (c != "") 10 c = ""; 11 } 12 return result.ToString(); 13 } 14 public void Uploadify(string id)//上传处理 15 { 16 string path = ""; 17 if(Request.Params["path"] != null) 18 path = Request.Params["path"].ToString();//上传路径 19 else if (Session["path"] != null) 20 path = Session["path"].ToString();//上传路径 21 string act = id;//上传资源类型 22 switch (act) 23 { 24 case "Upload": 25 new ServiceUpload().UploadImage(path); 26 break; 27 case "Thumbnail": 28 new ServiceUpload().OutputThumbnail(); 29 break; 30 default: 31 new ServiceUpload().UploadImage(path); 32 break; 33 } 34 35 }
