ASp.net下 fckeditor 配置图片上传最简单的方法

 fckeditor 的基本配置我就不讲了，讲讲图片上传这块吧；

 1. 原先的配置

     把 fckeditor/filemanager/connectors 目录删除；

     有同学可能会问了，都删除了怎么上传文件?

     呵呵。。。

 

2. 不要引用 FredCK.FCKeditorV2.dll;

    因为我都是采用js写的，不采用控件的方式；

    其实网上有很多人在尝试往 fckeditor/filemanager/connectors目录下注入，

    确实也有人不小心直接把FCK编辑器没有任何配置的情况下传到网上导致中招了；

 

3. 现在讲正题吧，一般来说我们用FCK的时候并不多，在一个系统里面可能也就几个地方

    现在假如我有一个简单的系统，里面有“新闻”发布和，类似“公司简介”单页发布两个地方要用的FCK

    我要把所有文章的图片放到 /Article/yyyyMMdd/guid.jpg

    把所有单页的图片放到 /Page/yyyyMMdd/guid.jpg

    或者说我要把图片按用户存到不同的地方。。。

 

4.实现

   怎么很简单的事情要说清楚需要做这么多铺垫，太麻烦了。。。。！！！

  

   web页面：

代码

  < form id = " form1 "  runat = " server " >
     < div >
         < div >
             < asp:TextBox ID = " TextBox1 "  TextMode = " MultiLine "  runat = " server " >   </ asp:TextBox >
         </ div >
         < br  />
         < asp:Button ID = " Button1 "  runat = " server "  Text = " Button "  onclick = " Button1_Click "   />
     </ div >
     </ form >

 

   

      JS：

     

 

代码

     < script src = " fckeditor/fckeditor.js "  type = " text/javascript " >< / script>

     < script type = " text/javascript " >

        window.onload  =   function () {
             var  oFCKeditor  =   new  FCKeditor( ' <%= TextBox1.ClientID %> ' );
            oFCKeditor.BasePath  =   ' fckeditor/ '
             oFCKeditor.Config.ImageUploadURL  = "/admin/auploader.aspx" ;
            oFCKeditor.ReplaceTextarea();
        }
     < / script>

 

 

这样就搞定了！

不要不相信啊，下面把上传页面的代码简单的写一个吧，对这个也比较重要；

 

代码

 protected  void  Page_Load(object sender, EventArgs e)
    {
         if  (Request.Files.Count  >   0 )
        {
            HttpPostedFile file  =  Request.Files[ 0 ];
            string path  =   " /Article/ "   +  System.DateTime.Now.ToString( " yyyyMMdd " )  +   " / " ;
            string serverPath  =  Server.MapPath(path);
            string fileName  =  Guid.NewGuid()  +  file.FileName.Substring(file.FileName.LastIndexOf( " . " ));

             if  ( ! System.IO.Directory.Exists(serverPath))
                System.IO.Directory.CreateDirectory(serverPath);
            file.SaveAs(serverPath  +  fileName);
            SendFileUploadResponse( 0 , path  +  fileName, fileName,  " 上传成功！ " );
        }
         else
        {
            SendFileUploadResponse( 1 ,  "" ,  "" ,  " 上传失败！ " );
        }
    }


    public  void  SendFileUploadResponse( int  isSucceed, string fileUrl, string fileName, string customMsg)
    {
        System.Web.HttpContext.Current.Response.Clear();
        System.Web.HttpContext.Current.Response.Write( " <script type='text/javascript'> " );
        System.Web.HttpContext.Current.Response.Write(@ " (function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})(); " );
        System.Web.HttpContext.Current.Response.Write( " window.parent.OnUploadCompleted( "   +  isSucceed.ToString().ToLower()  +   " , ' "   +  fileUrl  +   " ', ' "   +  fileName  +   " ', ' "   +  customMsg  +   " '); " );
        System.Web.HttpContext.Current.Response.Write( " </script> " );
        System.Web.HttpContext.Current.Response.End();
    }

 

 

好了搞定了！

这个上传代码没有做严格的后缀限制，大小限制；因为这个页面路径是我们自己配置的嘛，想怎么写就怎么写了；

甚至你可以根据不同的用户存到不同的地方；

这里需要说明一下 SendFileUploadResponse 方法，其实就是为FCk传回消息；

这里：

 System.Web.HttpContext.Current.Response.Write("window.parent.OnUploadCompleted(" + isSucceed.ToString().ToLower() + ", '" + fileUrl + "', '" + fileName + "', '" + customMsg + "');");

 

对应的是

fckeditor/dialog/fck_image/fck_image.js

 

代码

function  OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
{
     //  Remove animation
    window.parent.Throbber.Hide() ;
    GetE(  ' divUpload '  ).style.display   =   ''  ;

     switch  ( errorNumber )
    {
         case   0  :     //  No errors
            alert(  ' Your file has been successfully uploaded '  ) ;
             break  ;
         case   1  :     //  Custom error
            alert( customMsg ) ;
             return  ;
         case   101  :     //  Custom warning
            alert( customMsg ) ;
             break  ;
         case   201  :
            alert(  ' A file with the same name is already available. The uploaded file has been renamed to " '   +  fileName  +   ' " '  ) ;
             break  ;
         case   202  :
            alert(  ' Invalid file type '  ) ;
             return  ;
         case   203  :
            alert(  " Security error. You probably don't have enough permissions to upload. Please check your server. "  ) ;
             return  ;
         case   500  :
            alert(  ' The connector is disabled '  ) ;
             break  ;
         default  :
            alert(  ' Error on file upload. Error number:  '   +  errorNumber ) ;
             return  ;
    }

    sActualBrowser  =   ''  ;
    SetUrl( fileUrl ) ;
    GetE( ' frmUpload ' ).reset() ;
}

 

注意到 0 ，是成功，1 是失败，其他的自己看吧。。。。

对了说明一下这里用的是 2.65 版本测试的，如果有其他版本不一样的灵活变通下哈；

 

总结一下：

1. 在不同的页面配置不同的图片处理路径，如：

     oFCKeditor.Config.ImageUploadURL = "/admin/aupload.aspx";

     oFCKeditor.Config.ImageUploadURL = "/admin/bupload.aspx";

     。。。。

 

2. FCk 会把图片post到指定的路径，

     然后你自己操作图片，按目录存啊还是按当前用户session存随便来；

     当然别忘记验证用户的身份在先，没有权限的不要对他客气，直接返回错误，

     验证身份示例代码里面没写，自己根据项目自己加吧

 

3. 一定要返回值告诉FCK你的操作结果，否则会一直死在那里的。。。

    

PS：

看来我不是个喜欢写东西的人，觉得很麻烦。。。

总之第一篇博客就这样了，呵呵

 

 Demo 下载