CKEditor4结合php实现上传图片功能

刘会

ckedit4是没有图片上传功能的，单我们可以通过配置 config.js 文件来设置图片上传的接口，然后结合后端程序实现图片上传。本文讲解CKEditor4结合php实现上传图片功能的方法。

配置 config.js 文件

找到

1. ckeditor

复制代码

目录下的

1. config.js

复制代码

文件，添加两个配置

1. config.extraPlugins = 'uploadimage'
   
2. config.filebrowserImageUploadUrl =  '/api/UploadImg/upload.php'
   
3. //filebrowserImageUploadUrl 替换成你需要上传的接口

复制代码

我们点击图片按钮时候，便发现弹窗中多了上传的

1. tag

复制代码

界面 ，里面有选择文件按钮，可以上传图片到服务器，也就是会把file文件发送到上面设置的filebrowserImageUploadUrl接口。

upload.php 后端处理文件

TIPS：
1、ckedit4需要返回的json文件处理后续操作，使用json_encode；
2、$_REQUEST["ckCsrfToken"]是ckedit4需要的；
3、做了文件格式验证和文件大小处理；
4、文件名uniqid唯一处理。

1. <?php
   
2. $callback = $_REQUEST["ckCsrfToken"];
   
3. $list=array("uploaded"=>'0','callback'=>$callback);
   
4. $upaddress = "/uploads/allimg/".strftime("%Y%m",time())."/";
   
5. echo upload();
   
6. function upload(){
   
7.         global $list,$upaddress;
   
8.         $callback = $_REQUEST["ckCsrfToken"];
   
9.         $extensions = array("jpg","bmp","gif","png");
   
10.         $allowed_types = ['image/jpeg', 'image/png', 'image/gif'];
    
11.         $uploadFilename = $_FILES['upload']['name'];
    
12.         $uploadFilesize = $_FILES['upload']['size'];
    
13.         $uploadFiletype = $_FILES['upload']['type'];
    
14.         $extension = pathInfo($uploadFilename,PATHINFO_EXTENSION);
    
15.         if(is_uploaded_file($_FILES['upload']['tmp_name']) && $uploadFilesize < 1024*300 && in_array($uploadFiletype, $allowed_types) && in_array($extension,$extensions)){
    
16.                 $uploadPath = $_SERVER['DOCUMENT_ROOT'].$upaddress;
    
17.                 if(!file_exists($uploadPath))
    
18.                 {
    
19.                         mkdir($uploadPath,0777,true);
    
20.                 }
    
21.                 $uuid = str_replace('.','',uniqid("",TRUE)).".".$extension;
    
22.                 $desname = $uploadPath.$uuid;
    
23.                 $tag = move_uploaded_file($_FILES['upload']['tmp_name'],$desname);
    
24.                 $list['uploaded']=1;
    
25.                 $list['fileName']=$uuid;
    
26.                 $list['url']=$upaddress.$uuid;
    
27.                 return json_encode($list);
    
28.         }else{
    
29.                 $list['error']="文件类型不对或文件太大!";
    
30.                 return json_encode($list);
    
31.         }
    
32. }
    
33. ?>

复制代码

总结

到此这篇关于CKEditor4结合php实现上传图片功能的文章就介绍到这了,更多相关CKEditor4实现上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/program/318389p1j.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！