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

界面设计:

批量上传时:

下面是代码:

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>

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>

服务端代码:

 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     }

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     }

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