扩展FCKeditor编辑器的图片上传功能

在我使用的个人博客（Mr.d's Time）中，后台的文章发布使用的是FCKeditor编辑器，在FCKeditor编辑器中通过简单的配置就能使用已提供的图片上传的功能。但没有提供对上传后的图片进行管理，从而无法满足我日后的各种应用场景，比如：使用已上传的文件、删除已上传的文件等等，以至于在写博时，遇到“在文章中要插入图片”这样的应用让我的操作很繁琐（上传图片---记住文件件---手工写Url），因此无法让我享受到在写博时的快感。从而让我有了扩展FCKeditor编辑器图片上传功能的想法。

分析FCKeditor编辑器的图片上传流程

在FCKeditor编辑器中，图片上传功能是通过“dialog”目录中的“fck_image.html”页面通过表单的POST方式提交到服务器页面，而服务器页面再进一步的进行上传处理。上传表单的代码如“图一”：

提交到服务器页面的url地址也就是上图中的“action=“””的值，该值是通过配置文件（fckconfig.js）进行配置，这种实现方式非常灵活，使得我对这个功能的扩展也非常的方便。通过修改配置文件中的“FCKConfig.ImageUploadURL”选项就可以改变提交地址，从而让我制作的上传页面接收到POST过来的数据流。配置选项如“图二”：

虽然通过这样的配置后，表单就会提交到如图中的页面地址，那它是什么时候修改“图一”中的action的值的呢，它是通过“dialog”目录下的“fck_image”目录下的“fck_image.js”文件在window.onload事件中修改action的值为配置文件中FCKConfig.ImageUploadURL的值。修改代码如“图三”：

服务器端页面的上传的实现

通过本篇第一部分对FCKeditor的上传流程的分析，对于服务器端的处理流程，我想大家也非常的清楚这个处理过程-----“文件的上传功能”，但在上传的时候，我就可以对上传文件的信息录入数据库中，从而让我们方便管理上传后的文件。考虑大家对文件上传的都非常清楚，因此对服务器上传文件的代码我就贴出核心的部分，如“图四”：

在“图四”中，我们看到有段调用Js的方法，这个方法是在前面提到的“fck_image.js”中定义好的，目的就是当我们上传图片成功后自动帮我们填充该图片的链接地址，从而让我们无需拼接图片的Url地址。 

实现已上传图片文件的管理

通过在“fck_image.js”中的window.onload事件加入自定义的函数使用Ajax的方式访问服务器页面，获取已上传的图片信息，从而实现该功能，效果图如“图五”：