设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 93|回复: 16

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

[复制链接]

1

主题

40

回帖

101

积分

注册会员

积分
101
发表于 2024-4-20 09:43:02 | 显示全部楼层 |阅读模式
目录

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实现上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

0

主题

51

回帖

103

积分

注册会员

积分
103
发表于 2024-4-29 14:53:31 | 显示全部楼层
嘎嘎嘎嘎嘎嘎嘎
  • 打卡等级:初来乍到
  • 打卡总天数:5
  • 打卡月天数:0
  • 打卡总奖励:92
  • 最近打卡:2024-07-21 14:48:32

26

主题

43

回帖

816

积分

高级会员

积分
816

热心会员付费会员

发表于 2024-5-12 18:10:07 | 显示全部楼层
牛逼

1

主题

34

回帖

92

积分

注册会员

积分
92
发表于 2024-5-28 20:31:36 | 显示全部楼层
我完全同意你的观点

1

主题

34

回帖

89

积分

注册会员

积分
89
发表于 2024-6-1 06:59:51 | 显示全部楼层
6666666666

1

主题

43

回帖

109

积分

注册会员

积分
109
发表于 2024-6-3 07:07:28 | 显示全部楼层
同意!

1

主题

39

回帖

101

积分

注册会员

积分
101
发表于 2024-6-16 08:02:38 | 显示全部楼层
好用好用

0

主题

53

回帖

107

积分

注册会员

积分
107
发表于 2024-6-20 01:45:22 | 显示全部楼层
说得太好了,完全同意!
  • 打卡等级:偶尔看看
  • 打卡总天数:13
  • 打卡月天数:0
  • 打卡总奖励:946
  • 最近打卡:2024-06-16 23:50:00

1

主题

206

回帖

2675

积分

金牌会员

积分
2675

活跃会员热心会员推广达人宣传达人灌水之王付费会员

发表于 2024-6-21 11:14:46 | 显示全部楼层
同意!

0

主题

62

回帖

123

积分

注册会员

积分
123
发表于 2024-6-30 22:24:20 | 显示全部楼层
确实牛逼
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:13 , Processed in 0.085033 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表