找一個好的上傳插件不容易啊，最近看好一個上傳插件，查了些網上質料，自己做了些改動，記錄下來，來彰顯自己曾經屌絲過,這插件還不錯，支持多個上傳和預覽
首先引用，發現有的時候想學點新的東西，不過時間久了也經不住時光的消磨啊，把但是研究好的立馬記錄下來，我想比自己想研究的時候在回想會有用深刻的多
<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 }
后台代碼，界面也是一個ui框架，自己寫那是要死了，畢竟不是專業html的，此時功力還尚淺
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 }
