In this example,I am going to show you How to do upload custom file with CKEDITOR in PHP application. In this tutorial i explain step by step example code of How to image upload with CKEDITOR php.
You can see simple example of php ckeditor custom image upload using browse button.
Here i give you full example of How to How to do custom file upload with in CKEDITOR step by step like create one file in this file we are integrate CKEDITO and secound another file which we are created for uploadin custom file.
Following The Step:
- Create one index.php file
- Create custom file uploading file
Step 1 :Create one index.php file
Now we have download CKEDITOR in our local PC. then we are create our index.php file and this file we are use CKEDITOR
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Ckeditor File Upload</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.php", } ); </script> </body> </html> |
now we are create one photos folder. in this folder we are use in our custom file uploading code. our all custom file which we are uploading from PC to CKEDITOR they all file store in this folder.
Step 1 :Create Custom file uploading file
Now we are creating our custome file uploading file look like this “/upload.php”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <?php // Define file upload path $upload_dir = array( 'img'=> '/photos/', ); // Allowed image properties $imgset = array( 'maxsize' => 20000, 'maxwidth' => 1024, 'maxheight' => 800, 'minwidth' => 10, 'minheight' => 10, 'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), ); // If 0, will OVERWRITE the existing file define('RENAME_F', 1); /** * Set filename * If the file exists, and RENAME_F is 1, set "img_name_1" * * $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename */ function setFName($p, $fn, $ex, $i){ if(RENAME_F ==1 && file_exists($p .$fn .$ex)){ return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1)); }else{ return $fn .$ex; } } $re = ''; if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) { define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name']))); // Get filename without extension $sepext = explode('.', strtolower($_FILES['upload']['name'])); $type = end($sepext); /** gets extension **/ // Upload directory $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio']; $upload_dir = trim($upload_dir, '/') .'/'; // Validate file type if(in_array($type, $imgset['type'])){ // Image width and height list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); if(isset($width) && isset($height)) { if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){ $re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight']; } if($width < $imgset['minwidth'] || $height < $imgset['minheight']){ $re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; } if($_FILES['upload']['size'] > $imgset['maxsize']*1000){ $re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.'; } } }else{ $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.'; } // File upload path $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0); $uploadpath = $upload_dir . $f_name; // If no errors, upload the image, else, output the errors if($re == ''){ if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { $CKEditorFuncNum = $_GET['CKEditorFuncNum']; $url = 'http://'.$_SERVER['HTTP_HOST'].'/'.'ckeditor/'. $upload_dir . $f_name; $msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB'; $re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>'; }else{ $re = '<script>alert("Unable to upload the file")</script>'; } }else{ $re = '<script>alert("'. $re .'")</script>'; } } // Render HTML output @header('Content-type: text/html; charset=utf-8'); echo $re; |
