首页 > 代码库 > 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>
上传类(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 }
后台代码
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 }
Jquery plupload上传笔记(修改版)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。