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

界面设计:

批量上传时:

 

 

下面是代码:

aspx 代码:

 <tr>
                        <td style="display: none">
                            <iframe src="/b2c/pages/common/uploadPic.aspx?type=202&editor=<%=txt_Description.ClientID %>&spuId=<%=hid_spuId.Value %>"
                                scrolling="no" frameborder="0" height="50" width="400"></iframe>
                        </td>
                        <td style="display: ">
                            <input type="button" id="btnUpLoadImage" onclick="OpneImageDiv()" style="width: 120px"
                                class="btn" value="批量上传图片" /> 
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <CKEditor:CKEditorControl ID="txt_Description" name="content" runat="server" Width="100%"
                                Height="300px" TemplatesFiles="~/b2c/js/common/ckeditor/plugins/templates/templates/default.js"
                                onchange="unloadcheck=true;"></CKEditor:CKEditorControl>
                        </td>
                    </tr>

js 方法:

  <script type="text/javascript">
        $(function(){
           $("#divImage").dialog({ width: 600, height: 300, autoOpen: false, modal: true, title: '批量上传图片', draggable: false, resizable: false });

        })
        //多图上传
        ///b2c/pages/common/uploadPic.aspx?type=202&editor=<%=txt_Description.ClientID %>&spuId=<%=hid_spuId.Value %>
         window.onload = function () 
         { 
            var spuId='<%=hid_spuId.Value %>';
            //var editor='<%=txt_Description.ClientID %>';
            var editor='<%=txt_Description_ClientID%>'
            var params = 
            {  
                uploadServerUrl: "/b2c/pages/itemSPU/upload.aspx?SpuId="+spuId, //上传响应页面(必须设置)  
                maxFileData: 1024 * 300,       //300KB  
                jsFunction: "upload",         //上传成功后回调JS  
                filter: "*.jpg;*.png;"        //上传文件类型限制  
            }  
            swfobject.embedSWF("/b2c/js/Flash/uploadImage.swf", "myContent", "580", "200", "10.0.0", "/b2c/js/Flash/expressInstall.swf", params);  
        } 
        function OpneImageDiv()
        {
            $("#divImage").dialog("open");
        }
        function upload()
         {  
            $("#divImage").dialog("close");
            $.ajax({
                        type: "post",
                        dataType:"json",
                        data: {"type":1,"spuId":'<%=hid_spuId.Value %>'},
                        url: "/b2c/handlers/Order/UpLoadImage.ashx",
                        success: function(data)
                        {   
                            var   strHTML="";  
                            var txt_Description=  $("#<%=txt_Description.ClientID %>").val();
                            for(var i=0;i<data.length;i++)
                            {
                                var imgURL=data[i].filePath;
                                var imgName=data[i].fileName;
                                strHTML+="<img src='"+imgURL+"'/>";
                            }
                           // 给CKEDITOR赋值 ctl00_MainContent_txt_Description 服务端空间CKEDITOR的ClientID
                            CKEDITOR.instances['ctl00_MainContent_txt_Description'].insertHtml(strHTML)
                        },
                        error: function() {
                            alert("请求异常");
                        }
                    });       
        }        
        </script>

 

服务端代码:

{
        FileSettingEntity fileVaild = null;
        fileVaild = FileManger.GetFileSetting((int)ESourceType.fromSPUDescription);
        if (file.ContentLength > fileVaild.Length)
        {
            return "";
        }
        else
        {
            FileEntity fentity = null;
            try
            {
                fentity = Gasgoo.B2C.Common.FileUpload.Upload(file, ESourceType.fromSPUDescription, SpuId.ToType<int>(), 0, true);

            }
            catch
            {
                return "";
            }
            string ServiceImages = fentity.FileID + Path.GetExtension(Request.Form["fileName"].ToLower());
            if (!String.IsNullOrEmpty(ServiceImages))
            {
                return ServiceImages;
            }
            return "";
        }
    }

AJAX:

 context.Response.ContentType = "text/plain";
        #region 订单投诉跟进图片 add it by wangyy
        string kid = WebHelper.GetFormHtmlValue<string>("Kid", "");
        string imgs = CacheManager.CreateCache("Manage_Image_Upload").Get<string>(kid);
        CacheManager.CreateCache("Manage_Image_Upload").Remove(kid);
        #endregion


        #region SPU图片 add it by wangyy
        string spuId = WebHelper.GetFormHtmlValue<string>("spuId", "");
        string Spu_imgs = CacheManager.CreateCache("SPU_Image_Upload").Get<string>(spuId);
        CacheManager.CreateCache("SPU_Image_Upload").Remove(spuId);
        #endregion


        // type  1:SPU商品详情图片 0:订单跟进投诉图片
        int type = WebHelper.GetFormHtmlValue<int>("type", 0);
        List<FileEntity> list = new List<FileEntity>();
        string strJson = string.Empty;
        strJson = "[";
        if (type == 0)
        {
            list = FileFactory.GetItemImagesByFileArray(imgs, ESourceType.formOrderFollow);
        }
        else
        {
            list = FileFactory.GetItemImagesByFileArray(Spu_imgs, ESourceType.fromSPUDescription);

        }
        if (list != null && list.Count > 0)
        {
            foreach (FileEntity item in list)
            {
                strJson += "{\"fileName\":\"" + item.FileName + "\",\"filePath\":\"" + item.ImageUrl + "\"},";
            }
        }
        strJson = strJson.TrimEnd(',') + "]";
        context.Response.Write(strJson);
    }

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