Jquery plupload上传笔记(修改版)

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

首先引用

Jquery plupload上传笔记(修改版)_第1张图片

<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>
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         #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         }
View Code

 略缩图类(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 }
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='" + 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上传笔记(修改版)_第2张图片Jquery plupload上传笔记(修改版)_第3张图片Jquery plupload上传笔记(修改版)_第4张图片

你可能感兴趣的:(plupload)