富文本文件CKEDITOR增長上傳圖片功能(.net)

如題，自己的CKEDITOR控件並無開啓上傳圖片的功能，

打開圖像按鈕，只有圖像信息和高級兩個table選項卡，版本不一樣，顯示略有差別，個人實現是有兩種方法均可以添加上傳功能，

第一種方法使用CKEDITOR自身代碼功能

「預覽」中有一大堆鳥語，看得很不爽。可使用1或2來進行清除。

1：能夠打開ckeditor/plugins/image/dialogs/image.js文件，搜索「b.config.image_previewText」就能找到這段鳥語了，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。

2：打開ckeditor/config.js文件，在此函數內，添加

config.image_previewText = ''; //清空預覽區域顯示內容

 

打開ckeditor/plugins/image/dialogs/image.js文件，搜索「upload」能夠找到這一段

 

id:'Upload',hidden:true

 

實際上上傳功能被隱藏了，把上面的true改爲false，若是你的顯示是hidden:!0,直接改爲0便可，就能夠顯示了，再打開編輯器，就能找到上傳功能了。

設置上傳到服務器按鈕的事件URL，指定將上傳的文件提交給那個URL進行處理，

打開ckeditor/config.js文件，在此函數內，添加

 

config.filebrowserImageUploadUrl = "../UploadweixinImgHandler.ashx";//設置提交上傳圖片按鈕處理URL，我這裏設置的提交給一個通常處理程序，這個是本身要建立的，個人是建立到根目錄的，因此會有../，好了，下面開始編寫UploadweixinImgHandler.ashx文件內的代碼吧，以下：

 public void ProcessRequest(HttpContext context)
        {
            String callback = context.Request.QueryString["CKEditorFuncNum"].ToString();  
            ///'遍歷File表單元素
            HttpFileCollection files = HttpContext.Current.Request.Files;
            for (int iFile = 0; iFile < files.Count; iFile++)
            {
                //    ///'檢查文件擴展名字
                HttpPostedFile postedFile = files[iFile];
                //HttpPostedFile postedFile = files[0];
                string fileName;   //, fileExtension
                fileName = System.IO.Path.GetFileName(postedFile.FileName);
            

                string fileContentType = postedFile.ContentType.ToString();
                if (fileContentType == "image/bmp" || fileContentType == "image/gif" ||
                    fileContentType == "image/png" || fileContentType == "image/x-png" || fileContentType == "image/jpeg"
                    || fileContentType == "image/pjpeg")
                {
                    if (postedFile.ContentLength <= 2097152)
                    {
                        string filepath = postedFile.FileName;      //獲得的是文件的完整路徑,包括文件名，如：C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
                        //string filepath = FileUpload1.FileName;               //獲得上傳的文件名20022775_m.jpg

                        string serverpath = context.Server.MapPath("~/WeiXinImg/") + fileName;//取得文件在服務器上保存的位置C:\Inetpub\wwwroot\WebSite1\images\20022775_m.jpg

                        postedFile.SaveAs(serverpath);//上傳圖片到服務器指定地址

                        string imageurl  = "http://localhost:8665/WeiXinImg/"+fileName;//我是將測試時的本地地址+放置圖像的文件夾+圖片名稱做爲返回的URL

                        // 返回"圖像"選項卡並顯示圖片
                        context.Response.Write("<script type=\"text/javascript\">");
                        context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callback
                               + ",'" + imageurl + "','')");
                        context.Response.Write("</script>");  
                    }
                    else
                    {
                        context.Response.Write("<script>alert('上傳文件不能大於2M！')</script>");
                    }
                }
                else
                {
                    context.Response.Write("<script>alert('只支持BMP、GIF、JPG、PNG格式的圖片！')</script>");
                }
            }
        }

 

好了，以上是使用CKEDITOR自身的上傳功能，外加一個通常處理程序來完成上傳功能。

第二種設置上傳功能方法：若是你已經有了本身的上傳模板（我指的是一個單獨的上傳網頁），

 

打開ckeditor/plugins/image/dialogs/image.js文件，搜索「urlMissing」能夠找到這一段，在}，以後添加以下代碼：

{ type: 'button', id: 'myUpload', style:"margin-top:14px;", align: 'center', label: '本地上傳', onClick: function () { var retFile = showModalDialog("../UpLoadWeixinImg.aspx", "", "dialogHeight:380;dialogWidth:600;"); if (retFile != null) { this.getDialog().setValueOf('info', 'txtUrl', retFile); } } },

showModalDialog("../UpLoadWeixinImg.aspx",指定轉向URL的連接地址，上傳模板，showModalDialog方法在IE和火狐下能正常運行，在谷歌瀏覽器下可能不兼容，反正我試了不行，據說用window.open能夠代替，我沒有去嘗試，您能夠去試下，

運行界面以下：

下面來看看UpLoadWeixinImg.aspx上傳頁面模板的代碼以下：

 /// <summary>
        /// 上傳圖片
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void LinkBtnFileUploadImg_Click(object sender, EventArgs e)
        {
            if (this.FileUploadImg.HasFile)
            {
                string fileContentType = FileUploadImg.PostedFile.ContentType;
                if (fileContentType == "image/bmp" || fileContentType == "image/gif"||
                    fileContentType == "image/png"|| fileContentType == "image/x-png"|| fileContentType == "image/jpeg"
                    || fileContentType == "image/pjpeg")
                {
                    int fileSize = this.FileUploadImg.PostedFile.ContentLength;

                    if (fileSize <= 2097152)
                    {
                        string fileName = this.FileUploadImg.PostedFile.FileName;                  // 客戶端文件路徑

                        string imageurl = "http://localhost:8665/WeiXinImg/" + fileName;

                        string filepath = FileUploadImg.PostedFile.FileName;  //獲得的是文件的完整路徑,包括文件名，如：C:\Documents and Settings\Administrator\My Documents\My Pictures\20022775_m.jpg
                        //string filepath = FileUpload1.FileName;               //獲得上傳的文件名20022775_m.jpg
                        string filename = filepath.Substring(filepath.LastIndexOf("\\") + 1);//20022775_m.jpg
                        string serverpath = Server.MapPath("~/WeiXinImg/") + filename;//取得文件在服務器上保存的位置C:\Inetpub\wwwroot\WebSite1\images\20022775_m.jpg
                        this.FileUploadImg.PostedFile.SaveAs(serverpath);//將上傳的文件另存爲

　　　　　　　　　//此處我調用的是前臺客戶端的js腳本
                        ClientScript.RegisterStartupScript(this.GetType(), "SayHello", "<script>SayHello('" + imageurl + "')</script>");
                    }
                    else
                    {
                        Response.Write("<script>alert('上傳文件不能大於2M！')</script>");
                    }

                }
                else
                {
                    Response.Write("<script>alert('只支持BMP、GIF、JPG、PNG格式的圖片！')</script>");
                }
            }
            else
            {
                Response.Write("<script>alert('請選擇圖片！')</script>");
            }
        }

 

SayHello腳本以下：

 <script type="text/javascript">
        function SayHello(imgPath) {
            window.returnValue = imgPath; //上傳後的圖片連接
            window.close();
        }
</script>

 

最終實現以下圖：

 

這兩種方式實現方式同樣，具體哪一個好用能夠根據須要選擇，以上代碼中，若有冗餘的代碼，請自行刪除，我也是在網上七拼八湊一行一行代碼測試出來的