首页 > 代码库 > Jquery plupload上传笔记(修改版)

Jquery plupload上传笔记(修改版)

找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,来彰显自己曾经屌丝过,这插件还不错,支持多个上传和预览

首先引用

<link href="http://www.mamicode.com/~/css/plupload.css" rel="stylesheet" />@*plupload上传*@<script src="http://www.mamicode.com/~/Plupload/jquery.plupload.queue.min.js"></script><script src="http://www.mamicode.com/~/Plupload/plupload.min.js"></script><script src="http://www.mamicode.com/~/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>
View Code

上传类(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         #endregion33         /// <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();    //上传文件的URL43             HttpPostedFile uploadFile = context.Request.Files["file"];44             try45             {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             catch80             {81                 context.Response.StatusCode = 500;82                 context.Response.Write("发生了一个错误");83                 context.Response.End();84             }85         }
View Code

 

后台代码

 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=http://www.mamicode.com/‘" + 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         }
View Code

Jquery plupload上传笔记(修改版)