PHP environment Fckeditor Upload image Configuration tutorial

Source: Internet
Author: User
The previous PHP Getting Started Tutorial introduced how to install and configure Fckeditor in the PHP environment. today we will introduce how to configure the image upload function of Fckeditor in PHP, this article introduces how to install and configure Fckeditor in the PHP environment. Today, we will introduce how to configure the image upload function of Fckeditor in PHP, it involves the configuration of the upload path for the Fckeditor to upload images, the setting of the size limit for the Fckeditor to upload images, the solution for renaming the uploaded image file names and garbled characters, and the implementation method for adding watermarks to the uploaded image, as long as you have mastered the above four points, Fckeditor can be used in most PHP websites.

Enable Fckeditor to upload images

Considering the directory security, the Fckeditor2.6.6 Upload function is disabled by default. Therefore, you must enable the Fckeditor Upload function in the first step, because the chomod function is required for the Fckeditor Upload function of PHP to set permissions for the new directory, make sure that the PHP environment user has the permission to create and change the upload directory when the Fckeditor Upload function is enabled.

If the Fckeditor Upload function is not enabled, clickInsert/edit imageButton, selectUploadAfter selecting the file to be uploaded, clickSent to the serverThe following error message is reported when the button is clicked:

1
2
3
This file uploader is disabled.

Please check the "editor/filemanager/connectors/php/config. php" file

Based on the error message, open config. php in the editor/filemanager/connectors/php directory and find

1
$ Config ['enabled'] = false;

Change

1
$ Config ['enabled'] = true;

After the userfiles Upload directory is created under the corresponding directory, the Fckeditor Upload image function is enabled.

  Special reminder: Fckeditor seems to have a BUG, that is, JS compatibility is not perfect. after I set it in the Google Chrome browser, Fckeditor PHP Upload has never been implemented, and everything works normally after I changed IE.

Fckeditor Upload path Configuration tutorial

As an independent website developer, in addition to taking into account the technology and other conveniences, such as SEO optimization, and directory structure (URL) optimization is part of SEO, therefore, you need to consider the image upload path when setting the Fckeditor image upload function.

The default Fckeditor image Upload path structure has two forms: userfiles/file name and userfiles/file type/file name. for two Fckeditor Upload methods: quick upload (upload in image properties) and server tour Upload (links in image attributes), such as uploading images. the upload path in QuickUpload mode is userfiles/file name, and the upload path in server tour Upload mode is userfiles/images/file name.

The Fckeditor image Upload path is configured as follows:

Open the config. php file in the editor/filemanager/connectors/php directory and find

1
$ Config ['userfilespath'] = '/userfiles /';

Change

1
$ Config ['userfilespath'] = '/project directory/userfiles /';

Note: The userfiles folder is for the root directory of http: // localhost.

The above is the default Fckeditor Upload path configuration. you can customize the Fckeditor Upload directory according to the URL plan, as long as you modify the config. the values of $ Config ['filetypespath'], $ Config ['filetypesabsolutepath'], $ Config ['quickuploadpath'], and $ Config ['quickuploadabsolutepath'] in the PHP file can be. To some extent, this method can avoid the problem of duplicate names of image files uploaded by Fckeditor.

Limit the size of the image uploaded by Fckeditor

Fckeditor2.6.6 does not limit the size of the image file to be uploaded by default. you can use either of the following methods to improve the size of the image File. INI configuration file upload size limit, another method can only manually modify the Fckeditor source code, the method is as follows

1. open config. php in the editor/filemanager/connectors/php directory, and create a Config variable to set the size of the uploaded image. in KB

1
$ Config ['maximagesize'] = '000000 ';

2. open commands. php in the editor/filemanager/connectors/php directory and find

1
2
3
4
5
6
7
8
If (isset ($ Config ['secureimageupload'])
{
If ($ isImageValid = IsImageValid ($ oFile ['tmp _ name'], $ sExtension) === false)
{
$ SErrorNumber = '123 ';
}
// Size limit of uploaded images
}

Add

1
2
3
4
5
6
7
8
If (isset ($ Config ['maximagesize'])
{
$ IFileSize = round ($ oFile ['size']/1024 );
If ($ iFileSize> $ Config ['maximagesize'])
{
$ SErrorNumber = '123 ';
}
}

Description: Because PHP calculates the size of the uploaded image in bytes, the code first converts the size of the uploaded image to KB, and then compares whether the size of the uploaded image exceeds the specified size. if the size is exceeded, an error is returned.

Note that

1
2
3
4
5
6
If (! $ SErrorNumber & IsAllowedExt ($ sExtension, $ resourceType ))
{
// Fckeditor uploads images
}
Else
$ SErrorNumber = '123 ';

Remove the else statement at the end of the code block. Otherwise, the Fckeditor cannot limit the size of the image file to be uploaded.

3. open editor/dialog/fck_image/fck_image.js, add the error code (errorNumber), find the OnUploadCompleted function, and add

1
2
3
Case 204:
Alert ("Security error. File size error .");
Return;

So far, the Fckeditor can be configured to limit the size of image files to be uploaded. this is also the idea of limiting the size of other types of uploaded files.

Solution for Fckeditor to upload duplicate image file names and Chinese garbled characters

The test Fckeditor2.6.6 does not solve the problem of changing the Chinese name of the uploaded file to garbled characters. this is because Fckeditor does not rename the file when implementing the upload function, which may easily lead to duplicate names and garbled characters of the uploaded image file.

The solution for uploading image files with duplicate names and garbled characters is as follows:

Open commands. php in the editor/filemanager/connectors/php directory and find the FileUpload function.

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

Add later

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

Here, the rand function can change the rename rules as needed.

Another solution is to use the iconv function to encode and convert the file name. However, the problem still persists. Therefore, it is best to rename the image file name uploaded by Fckeditor.

Fckeditor uploads images and adds watermarks

For website owners, adding watermarks to protect the copyright of images is essential. we can use the PHP watermarking function and the Fckeditor file uploading function FileUpload to add watermarks to images, for watermark functions, refer to the PHP image watermark function: supports adding a watermark article in the form of images and text.

Now, Fckeditor's getting started tutorial on image upload configuration in PHP environment is complete.

  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.