Php-mysql Course

The "iaupload.php" is a PHP script that can be used to upload Image and Audio files (MP3, OGG, WAV) on server, with CKEditor, and use them automatically in the editor's contents.

- You can download the script from this link: CKEditor Uploader.

• To test the script: Demo

- When you upload an audio file, the script will automatically adds an <audio> element in the CKEditor content with the SRC address of the uploaded file.
 
For comments, questions, or any issue related to this addon, write on Forum, in the "Scripts from Website" category.

Usage

1. To use this addon in CKEditor, Download the script and copy the "iaupload.php" file directly in the "ckeditor/plugins/" folder. Or, copy the code bellow, and add it into a PHP file named "iaupload.php" in "ckeditor/plugins/" folder.
2. Change the values of $upload_dir array (lines: 6, 7), to set the path of the folders where to upload images and audio files on your server, RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER (it can be the same directory).
3. By default, if the name of the uploaded file exists in the directory for upload, it will be renamed with "filename_NR.ext" (NR is a number). If you want to Overwrite the existing file, set value of 0 to RENAME_F (line 28).
4. Set CHMOD writable permision (0777) to the folders for images and audio files on your server (if on Linux system), to allow PHP to upload the files.
5. Enable the plugin by adding the filebrowserImageUploadUrl parameter in CKEditor configuration on your page, and set to allow <audio> tag in content (with: extraAllowedContent ):
CKEDITOR.replace('textareaId', {
 "filebrowserImageUploadUrl": "/path_to/ckeditor/plugins/imgupload.php"
});
CKEDITOR.config.extraAllowedContent = 'audio[*]{*}'; //to allow audio tag

Screenshoot

Click on image

imgbrowse Upload extension

Code of iaupload.php

- Click to select it.
<?php
// PHP Upload Script for CKEditor: https://coursesweb.net/

// HERE SET THE PATH TO THE FOLDERS FOR IMAGES AND AUDIO ON YOUR SERVER (RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER)
$upload_dir = array(
 'img'=> '/imgs/',
 'audio'=> '/audio/'
);

// HERE PERMISSIONS FOR IMAGE
$imgset = array(
 'maxsize' => 2000, // maximum file size, in KiloBytes (2 MB)
 'maxwidth' => 900, // maximum allowed width, in pixels
 'maxheight' => 800, // maximum allowed height, in pixels
 'minwidth' => 10, // minimum allowed width, in pixels
 'minheight' => 10, // minimum allowed height, in pixels
 'type' => array('bmp', 'gif', 'jpg', 'jpe', 'png'), // allowed extensions
);

// HERE PERMISSIONS FOR AUDIO
$audioset = array(
 'maxsize' => 20000, // maximum file size, in KiloBytes (20 MB)
 'type' => array('mp3', 'ogg', 'wav'), // allowed extensions
);

// If 1 and filename exists, RENAME file, adding "_NR" to the end of filename (name_1.ext, name_2.ext, ..)
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);

$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) >1) {
 define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name']))); //get filename without extension

 // get protocol and host name to send the absolute image path to CKEditor
 $protocol = !empty($_SERVER['HTTPS']) ? 'https://' : 'http://';
 $site = $protocol. $_SERVER['SERVER_NAME'] .'/';
 $sepext = explode('.', strtolower($_FILES['upload']['name']));
 $type = end($sepext); // gets extension
 $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
 $upload_dir = trim($upload_dir, '/') .'/';

 //checkings for image or audio
 if(in_array($type, $imgset['type'])){
 list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); // image width and height
 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 if(in_array($type, $audioset['type'])){
 if($_FILES['upload']['size'] > $audioset['maxsize']*1000) $re .= '\\n Maximum file size must be: '. $audioset['maxsize']. ' KB.';
 }
 else $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';

 //set filename; if file exists, and RENAME_F is 1, set "img_name_I"
 // $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;
 }
 
 $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
 $uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $f_name; // full file path

 // 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 = $site. $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']) ? "window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')" //for img
 : '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(\'<audio src="'. $url .'" controls></audio>\', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent(); dialog.hide();';
 }
 else $re = 'alert("Unable to upload the file")';
 }
 else $re = 'alert("'. $re .'")';
}

@header('Content-type: text/html; charset=utf-8');
echo '<script>'. $re .';</script>';

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Images and Audio Uploader addon for CKEditor

Last accessed pages

  1. Simple Admin Login PHP Script (8068)
  2. PHP Script Website Mini-Traffic (5386)
  3. Display data from PHP Array, or MySQL in HTML table (21912)
  4. SHA1 Encrypt data in JavaScript (22480)
  5. Using Variable and Function with Name from String in JavaScript (754)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (813)
  2. SHA256 Encrypt hash in JavaScript (734)
  3. Create simple Website with PHP (690)
  4. Read Excel file data in PHP - PhpExcelReader (689)
  5. PHP Unzipper - Extract Zip, Rar Archives (684)