网页编辑器

关注公众号 jb51net

关闭
首页 > 网络编程 > 网页编辑器 > Fckeditor 上传图片

针对PHP环境下Fckeditor编辑器上传图片配置详细教程

作者：

今天介绍Fckeditor上传图片功能在PHP中的配置方法，涉及Fckeditor上传图片的上传路径配置、限制Fckeditor上传图片大小设置、Fckeditor上传图片文件名重名及乱码解决方法以及针对上传图片添加水印功能的实现方法，只要掌握了以上四点，Fckeditor在大部分PHP类型网站中的应用都能解决

开启Fckeditor上传图片功能

　　考虑到目录安全性问题，默认Fckeditor2.6.6上传功能并未开启，所以第一步我们必须开启Fckeditor上传功能，这里需要注意，由于PHP版本Fckeditor上传功能需要用到chomod函数对新建目录进行权限设置，所以请务必确认在启用Fckeditor上传功能时PHP环境的用户具有创建和更改上传目录的权限。

　　如果没有开启Fckeditor上传功能，在点击插入/编辑图像按钮，选择上传，在选择完要上传的文件后点击发送到服务器上按钮时会报错误信息如下

复制代码 代码如下:

This file uploader is disabled.    
Please check the "editor/filemanager/connectors/php/config.php" file 

根据错误信息，打开editor/filemanager/connectors/php目录下config.php，找到

复制代码 代码如下:

$Config['Enabled'] = false ;

更改为

复制代码 代码如下:

$Config['Enabled'] = true ;

并在相应目录下建立userfiles上传目录后，Fckeditor上传图片功能开启。

　　特别提醒：Fckeditor似乎有个BUG漏洞，即JS兼容性还不是太完美，之前我在Google Chrome游览器下设置完后，Fckeditor PHP上传一直实现不了，换了IE后一切正常。

Fckeditor上传图片时上传路径配置教程

　　作为独立网站开发者，除了考虑技术还需要兼顾其他方便，比如SEO优化，而目录结构(URL)优化是SEO的一部分，这就需要在设置Fckeditor上传图片功能时考虑图片上传路径问题。

　　默认Fckeditor图片上传路径结构有两种形式：userfiles/文件名和userfiles/文件类型/文件名，针对两种Fckeditor上传方式：快速上传（图像属性中的上传）和服务器游览上传（图像属性中的链接），比如上传图片，QuickUpload模式上传路径为userfiles/文件名，服务器游览上传模式上传路径为userfiles/images/文件名。

Fckeditor图片上传路径配置如下

　　打开editor/filemanager/connectors/php目录下config.php文件，找到

复制代码 代码如下:

$Config['UserFilesPath'] = '/userfiles/' ; 

更改为

复制代码 代码如下:

$Config['UserFilesPath'] = '/项目目录/userfiles/' ;

注意：此处userfiles文件夹是针对http://localhost/的根目录而言的。

　　以上是默认Fckeditor上传路径的配置，根据URL规划你可以自定义Fckeditor的上传目录，只要修改config.php文件中的$Config['FileTypesPath']、$Config['FileTypesAbsolutePath']、$Config['QuickUploadPath']、$Config['QuickUploadAbsolutePath']四个上传目录路径的值即可。这种方法一定程度上也能避免Fckeditor上传图片文件名重名问题。

限制Fckeditor上传图片大小设置

　　Fckeditor2.6.6默认并没有限制上传图片文件的大小，可以通过两种方法改进，一种可以通过修改PHP.INI配置文件上传大小来限制，另一种方法只能手动修改Fckeditor源码，方法如下

　　1、打开editor/filemanager/connectors/php目录下config.php，创建Config变量设置上传图片大小，这里以KB为单位

复制代码 代码如下:

$Config['MaxImageSize']= '1024'; 

2、打开editor/filemanager/connectors/php目录下commands.php，找到

复制代码 代码如下:

if ( isset( $Config['SecureImageUploads'] ) )  
{  
if ( ( $isImageValid = IsImageValid( $oFile['tmp_name'], $sExtension ) ) === false )  
{  
$sErrorNumber = '202' ;  
}  
//上传图片大小限制  
} 

在上传图片大小限制处，添加

复制代码 代码如下:

if ( isset( $Config['MaxImageSize'] ) )  
{  
    $iFileSize = round( $oFile['size'] / 1024 );  
    if($iFileSize > $Config['MaxImageSize'] )  
    {  
        $sErrorNumber = '204';  
    }  
} 

说明：由于PHP计算上传图片大小以字节为单位，所以代码首先将上传的图片大小折算为KB，再来对比是否超出了规定的图片大小，如超出，则报错。

　　注意最后将

复制代码 代码如下:

if ( !$sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )  
{  
//Fckeditor上传图片功能  
}  
else 
$sErrorNumber = '202' ; 

代码块结尾处的else语句去除，否则实现不了限制Fckeditor上传图片文件大小的功能。

　　3、打开editor/dialog/fck_image/fck_image.js，添加错误代码(errorNumber)信息，找到OnUploadCompleted函数，添加

复制代码 代码如下:

case 204 :  
alert( "Security error. File size error." ) ;  
return ; 

至此限制Fckeditor上传图片文件大小配置就完成了，其他类型的上传文件大小限制也是这种思路。

Fckeditor上传图片文件名重名及中文乱码解决方法

　　经测试Fckeditor2.6.6并没有解决上传文件中文名变为乱码的问题，这是由于Fckeditor实现上传功能时并没有将文件重命名，容易导致上传图片文件重名及乱码问题。

　　上传图片文件重名和乱码解决方法如下

　　打开editor/filemanager/connectors/php目录下commands.php，找到FileUpload函数，在

复制代码 代码如下:

$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;  
$sExtension = strtolower( $sExtension ) ;

后添加

复制代码 代码如下:

$sFileName = rand(0,100).".".$sExtension; 

此处rand函数可根据需要自行改变重命名规则。

　　另一种上传图片文件名乱码解决方法为使用iconv函数对文件名进行编码转换，但仍然存在重名问题，所以针对Fckeditor上传图片文件名最好还是重命名。

Fckeditor上传图片添加水印功能

　　对于网站拥有者来说保护图片版权添加水印必不可少，我们可以利用PHP添加水印函数结合Fckeditor文件上传函数FileUpload实现图片添加水印功能，水印函数请参考PHP图片水印函数:支持以图片和文字方式添加水印一文。

　　至此Fckeditor在PHP环境下的上传图片配置入门教程就介绍完了。

您可能感兴趣的文章:
阅读全文