
Ckeditor Upload Image on server folder using PHP
In this document, we are providing a detailed step by step guide to uploading Image in server folder using PHP script without ckfinder.
Step: 1 Create php file in index.php in your server directory and use ckeditor CDN library.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Hostmystory</title>
<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" >
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
height: 300,
filebrowserUploadUrl: "upload_img.php",
} );
</script>
</body>
</html>
Step: 2 Create php file name upload_img.php PHP code should be something like below.
if(isset($_FILES['upload'])){
// ------ Process your file upload code -------
$filen = $_FILES['upload']['tmp_name'];
$con_images = "uploaded/".$_FILES['upload']['name'];
move_uploaded_file($filen, $con_images );
$url = $con_images;
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a specific configuration file or anything else).
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages.
$langCode = $_GET['langCode'] ;
// Usually you will only assign something here if the file could not be uploaded.
$message = '';
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
}
and Create a folder name uploaded for store all image.
See the live demo. The upload is implemented in a non-blocking way, so while the image is being uploaded the user may continue editing the content.
Comments / Answer