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 下载