javascript - 上传并插入Ckeditor

标签 javascript jquery html ckeditor

我正在尝试构建一个与 Ckeditor 一起使用的上传系统。

我遇到的问题是当我继续上传文件时,它仍然上传但无法包含到 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;
}

上传.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>   

演示:

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

这是您可以用来测试的所有文件:

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

最佳答案

我将 filename() 放入 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;   
}

关于javascript - 上传并插入Ckeditor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21566031/

相关文章:

javascript - 如何只解除某些事件的绑定(bind)?

javascript - 如何制作 Ajax 联系表单

jquery - 如何使用 'mixitup'插件自定义多重过滤?

jquery - 为什么 $(elem).data() 有效但 jQuery.data() 不起作用?

javascript - 无法通过 JavaScript 调用淡入淡出 div

html - Angular 处理条件驱动形式

javascript - 为什么javascript不能设置HTML表单元素的值?

javascript - 在 ReactJS 中访问文件之间的状态

javascript - 快速路由错误无法获取/api/name

javascript - 如果部分未执行