HTML Upload Images in TinyMCE Editor using PHP

HTML Upload Images in TinyMCE Editor using PHP

In this Post We Will Explain About is HTML Upload Images in TinyMCE Editor using PHP With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to html – upload image from local into tinyMCE Example

In this post we will show you Best way to implement Upload images for usage in TinyMCE Editor, hear for How to Upload Image in TinyMCE Editor using PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   autocomplete textbox using jquery ajax in php

TinyMCE Editor Image Upload Plugin is also available in offical TinyMCE Editor website all of the details itself.also Image upload of file upload is a common main feature in the TinyMCE WYSIWYG HTML editor. If We are using TinyMCE editor plugin in the main textarea, the image can be easy way to inserted in the ck editor.

HTML Code(index.php)

particuler an HTML index.php main file element (liveTextarea) to put TinyMCE basic HTML Editor.

<textarea id="liveTextarea"></textarea>

JavaScript Source Code

First of all, Simple include the CDN js library of main TinyMCE plugin.

<script src="tinymce/tinymce.min.js"></script>

//simple tinyMCE init mode
    selector: '#liveTextarea',
    plugins: 'image code',
    toolbar: 'undo redo | image code',
    images_upload_url: 'do_upload.php',
    images_upload_handler: function (blobInfo, success, failure) {
        var livexhr, myformData;
        livexhr = new XMLHttpRequest();
        livexhr.withCredentials = false;'POST', 'do_upload.php');
        livexhr.onload = function() {
            var json;
            if (livexhr.status != 200) {
                failure('HTTP Error: ' + livexhr.status);
            json = JSON.parse(livexhr.responseText);
            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + livexhr.responseText);
        myformData = new FormData();
        myformData.append('file', blobInfo.blob(), blobInfo.filename());

PHP Upload Handler (do_upload.php)

Check simple whether the Images or file was uploaded via simple HTTP POST Request using is_uploaded_file() methods in PHP.

Also Read :   Import Data From Excel to MYSQL using PHP Code


$check_accept_origins = array("http://localhost", "YOUR_HOST_NAME", "");

$mediaFolder = "images/";

$live_temp = current($_FILES);
        if(in_array($_SERVER['HTTP_ORIGIN'], $check_accept_origins)){
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
            header("HTTP/1.1 403 Origin Denied");
	//here Images check validation
    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $live_temp['name'])){
        header("HTTP/1.1 400 Invalid file name.");
	//here Images check validation
    if(!in_array(strtolower(pathinfo($live_temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
        header("HTTP/1.1 400 Invalid extension.");

    $datafilewr = $mediaFolder . $live_temp['name'];
    move_uploaded_file($live_temp['tmp_name'], $datafilewr);

    echo json_encode(array('location' => $datafilewr));
} else {

    header("HTTP/1.1 500 Server Error");

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example


I hope you have Got What is File and image management plugins for TinyMCE And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.