上传并插入Ckeditor

Question

I am trying to build an upload system work with Ckeditor.

The problem I have is when I keep uploading the file, it still upload but cannot include into Ckeditor.

HTML:

<script src="ckeditor.js"></script>
<script src="jquery-1.11.0.min.js"></script>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();">
    <p id="f1_upload_process">Loading...
        <br/>
        <img src="loader.gif" />
        <br/>
    </p>
    <p id="f1_upload_form" align="center">
        <br/>
        <label>File:
            <input id="file" name="myfile" type="file" size="30" />
        </label>
        <label>
            <input type="submit" name="submitBtn" class="sbtn" value="Upload" />
        </label>
    </p>
    <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
<textarea id="editor" name="editor" rows="10" cols="80"></textarea>

Javascript

CKEDITOR.replace('editor');
function filename() {
    var fullPath = document.getElementById('file').value;
    index = fullPath.lastIndexOf("\\");
    filename = fullPath.substring(index + 1);
    //INPUT into CkEditor//
    var editor = CKEDITOR.instances.editor;
    editor.insertHtml("<img src=" + filename + " />");
    //INPUT into CkEditor//
}
function startUpload() {
    document.getElementById('f1_upload_process').style.visibility = 'visible';
    document.getElementById('f1_upload_form').style.visibility = 'hidden';
    return true;
}
function stopUpload(success) {
    var result = '';
    if (success == 1) {
        result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
        filename();
        success = 0;
    } else {
        result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
    }
    document.getElementById('f1_upload_process').style.visibility = 'hidden';
    document.getElementById('f1_upload_form').innerHTML = result + '<label>File:<input id="file" name="myfile" type="file" size="30" /></label<label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label>';
    document.getElementById('f1_upload_form').style.visibility = 'visible';
    return true;
}

upload.php

<?php
   // Edit upload location here
   $destination_path = getcwd().DIRECTORY_SEPARATOR;

   $result = 0;

   $target_path = $destination_path . basename( $_FILES['myfile']['name']);

   if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
      $result = 1;
   }

   sleep(1);
?>

<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>   

Demo:

http://jsfiddle.net/KevinNote/g7KMe/1/

Here is all the file that you can use to test:

https://www.dropbox.com/s/mmki4tpzdsh1a2d/upload.rar

Answer 1

I put the filename() into the stopUpload()

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
            var fullPath = document.getElementById('file').value;
    index = fullPath.lastIndexOf("\\");
    filename = fullPath.substring(index + 1);
//INPUT into CkEditor//
    var editor = CKEDITOR.instances.editor;
    editor.insertHtml("<img src=" + filename + " />");
//INPUT into CkEditor//
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input id="file" " name="myfile" type="file" size="30" /></label<label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}