码迷,mamicode.com
首页 > Web开发 > 详细

在线编辑器CKEditor,多图上传功能实现

时间:2015-07-29 12:04:33      阅读:638      评论:0      收藏:0      [点我收藏+]

标签:

界面设计:

技术分享

批量上传时:

技术分享

 

 

下面是代码:

aspx 代码:

技术分享
 1  <tr>
 2                         <td style="display: none">
 3                             <iframe src="/b2c/pages/common/uploadPic.aspx?type=202&editor=<%=txt_Description.ClientID %>&spuId=<%=hid_spuId.Value %>"
 4                                 scrolling="no" frameborder="0" height="50" width="400"></iframe>
 5                         </td>
 6                         <td style="display: ">
 7                             <input type="button" id="btnUpLoadImage" onclick="OpneImageDiv()" style="width: 120px"
 8                                 class="btn" value="批量上传图片" /> 
 9                         </td>
10                     </tr>
11                     <tr>
12                         <td>
13                             <CKEditor:CKEditorControl ID="txt_Description" name="content" runat="server" Width="100%"
14                                 Height="300px" TemplatesFiles="~/b2c/js/common/ckeditor/plugins/templates/templates/default.js"
15                                 onchange="unloadcheck=true;"></CKEditor:CKEditorControl>
16                         </td>
17                     </tr>
View Code

js 方法:

技术分享
 1   <script type="text/javascript">
 2         $(function(){
 3            $("#divImage").dialog({ width: 600, height: 300, autoOpen: false, modal: true, title: 批量上传图片, draggable: false, resizable: false });
 4 
 5         })
 6         //多图上传
 7         ///b2c/pages/common/uploadPic.aspx?type=202&editor=<%=txt_Description.ClientID %>&spuId=<%=hid_spuId.Value %>
 8          window.onload = function () 
 9          { 
10             var spuId=<%=hid_spuId.Value %>;
11             //var editor=‘<%=txt_Description.ClientID %>‘;
12             var editor=<%=txt_Description_ClientID%>
13             var params = 
14             {  
15                 uploadServerUrl: "/b2c/pages/itemSPU/upload.aspx?SpuId="+spuId, //上传响应页面(必须设置)  
16                 maxFileData: 1024 * 300,       //300KB  
17                 jsFunction: "upload",         //上传成功后回调JS  
18                 filter: "*.jpg;*.png;"        //上传文件类型限制  
19             }  
20             swfobject.embedSWF("/b2c/js/Flash/uploadImage.swf", "myContent", "580", "200", "10.0.0", "/b2c/js/Flash/expressInstall.swf", params);  
21         } 
22         function OpneImageDiv()
23         {
24             $("#divImage").dialog("open");
25         }
26         function upload()
27          {  
28             $("#divImage").dialog("close");
29             $.ajax({
30                         type: "post",
31                         dataType:"json",
32                         data: {"type":1,"spuId":<%=hid_spuId.Value %>},
33                         url: "/b2c/handlers/Order/UpLoadImage.ashx",
34                         success: function(data)
35                         {   
36                             var   strHTML="";  
37                             var txt_Description=  $("#<%=txt_Description.ClientID %>").val();
38                             for(var i=0;i<data.length;i++)
39                             {
40                                 var imgURL=data[i].filePath;
41                                 var imgName=data[i].fileName;
42                                 strHTML+="<img src=‘"+imgURL+"‘/>";
43                             }
44                            // 给CKEDITOR赋值 ctl00_MainContent_txt_Description 服务端空间CKEDITOR的ClientID
45                             CKEDITOR.instances[ctl00_MainContent_txt_Description].insertHtml(strHTML)
46                         },
47                         error: function() {
48                             alert("请求异常");
49                         }
50                     });       
51         }        
52         </script>
View Code

 

服务端代码:

技术分享
 1 {
 2         FileSettingEntity fileVaild = null;
 3         fileVaild = FileManger.GetFileSetting((int)ESourceType.fromSPUDescription);
 4         if (file.ContentLength > fileVaild.Length)
 5         {
 6             return "";
 7         }
 8         else
 9         {
10             FileEntity fentity = null;
11             try
12             {
13                 fentity = Gasgoo.B2C.Common.FileUpload.Upload(file, ESourceType.fromSPUDescription, SpuId.ToType<int>(), 0, true);
14 
15             }
16             catch
17             {
18                 return "";
19             }
20             string ServiceImages = fentity.FileID + Path.GetExtension(Request.Form["fileName"].ToLower());
21             if (!String.IsNullOrEmpty(ServiceImages))
22             {
23                 return ServiceImages;
24             }
25             return "";
26         }
27     }
View Code

AJAX:

技术分享
 1  context.Response.ContentType = "text/plain";
 2         #region 订单投诉跟进图片 add it by wangyy
 3         string kid = WebHelper.GetFormHtmlValue<string>("Kid", "");
 4         string imgs = CacheManager.CreateCache("Manage_Image_Upload").Get<string>(kid);
 5         CacheManager.CreateCache("Manage_Image_Upload").Remove(kid);
 6         #endregion
 7 
 8 
 9         #region SPU图片 add it by wangyy
10         string spuId = WebHelper.GetFormHtmlValue<string>("spuId", "");
11         string Spu_imgs = CacheManager.CreateCache("SPU_Image_Upload").Get<string>(spuId);
12         CacheManager.CreateCache("SPU_Image_Upload").Remove(spuId);
13         #endregion
14 
15 
16         // type  1:SPU商品详情图片 0:订单跟进投诉图片
17         int type = WebHelper.GetFormHtmlValue<int>("type", 0);
18         List<FileEntity> list = new List<FileEntity>();
19         string strJson = string.Empty;
20         strJson = "[";
21         if (type == 0)
22         {
23             list = FileFactory.GetItemImagesByFileArray(imgs, ESourceType.formOrderFollow);
24         }
25         else
26         {
27             list = FileFactory.GetItemImagesByFileArray(Spu_imgs, ESourceType.fromSPUDescription);
28 
29         }
30         if (list != null && list.Count > 0)
31         {
32             foreach (FileEntity item in list)
33             {
34                 strJson += "{\"fileName\":\"" + item.FileName + "\",\"filePath\":\"" + item.ImageUrl + "\"},";
35             }
36         }
37         strJson = strJson.TrimEnd(,) + "]";
38         context.Response.Write(strJson);
39     }
View Code

      其中有很多框架中的代码引用,只提供一种思路,又不熟悉和有问题的地方请联系我 QQ:1627298416,欢迎指教

在线编辑器CKEditor,多图上传功能实现

标签:

原文地址:http://www.cnblogs.com/q101301/p/4685428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!