Yii结合CKEditor实现图片上传功能_php实例

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它。虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的。

下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下。

首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUploadUrl属性:

复制代码 代码如下:

CKEDITOR.replace( 'editor1',
    {
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
    });

然后在对应的URL上实现图片上传的功能,并向CKEditor返回特定格式的HTML代码,CKEditor就能正常预览并插入图片了。
下面只截取控制器的部分代码,Controller部分我是这样实现的:

复制代码 代码如下:

/**
 * 保存上传的图片
 *
 * @return string javascript code
 * @author lfyzjck
 **/
public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn')
{
 if(empty($CKEditorFuncNum) || $type != 'Images'){
  $this->mkhtml($CKEditorFuncNum,'','错误的函数调用');
 }
 if(isset($_FILES['upload'])){
  //获取关于图片上传配置
  $options = Options::model()->findByPk(1);
  $form = new UploadForm('image',$options);
  $form->upload = CUploadedFile::getInstanceByName('upload');
  if($form->validate()){
  //文件名:时间+源文件名
   $target_filename = date('Ymd-hm',time()).$form->upload->getName();
   $path = Yii::app()->basePath.'/../uploads/'.$target_filename;   //图片保存路径
   $form->upload->saveAs($path);
   $this->mkhtml($CKEditorFuncNum,Yii::app()->baseUrl.'/uploads/'.$target_filename, "上传成功");
  }
  else{
   $this->mkhtml($CKEditorFuncNum,'',$form->getError('upload'));
  }
 }
}
/**
 * 返回CKEditor的提示信息
 *
 * @return void
 * @author lfyzjck
 **/
private function mkhtml($fn, $fileurl, $message)
{
 $str = '';
 exit($str);
}

需要特别说明的mkhtml函数,他会调用CKEditor的函数产生提示信息。上传成功的时候将图片链接返回,CKEditor会根据URL生成图片预览。

然后是UploadForm的代码,这里会验证图片的格式和大小是否符合要求。

复制代码 代码如下:

class UploadForm extends CFormModel
{
 public $upload;

 private $options;
 private $type;

 public function __construct($type, $options){
  $this->options = $options;
  $this->type = $type;
 }
 /**
  * Declares the validation rules.
  * The rules state that username and password are required,
  * and password needs to be authenticated.
  */
 public function rules()
 {
  return array(
   array('upload', 'file',
    'types' => $this->options->getAttribute("allow_".$this->type."_type"),
    'maxSize' => 1024 * (int)$this->options->getAttribute("allow_".$this->type."_maxsize"),
    'tooLarge'=>'文件大小超过限制',
   ),
  );
 }
}

时间: 2024-08-29 09:31:27

Yii结合CKEditor实现图片上传功能_php实例的相关文章

使用ThinkPHP+Uploadify实现图片上传功能_php实例

首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" data-ke-src="/Public/uploadify/jquery.min.js" type="text/javascript"> <script src="/uploadify/jquery.uploadify.min.js"

php+html5实现无刷新图片上传教程_php实例

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理.实现过程如下(带图片预览功能) 前端html代码 upload,html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu

PHP图片上传代码_php实例

使用说明:1. 将PHP.INI文件里面的"extension=php_gd2.dll"一行前面的;号去掉,因为我们要用到GD库;2. 将extension_dir =改为你的php_gd2.dll所在目录; 复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><?php/*************************

php实现粘贴截图并完成上传功能_php实例

今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的! 原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传 代码可以直接运行,有兴趣你们可以试试 <?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; $file = (isset($_POST["file"])) ?

PHP中Ckeditor+Ckfinder配置图片上传功能

第一:安装配置CKEditor 在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下. 1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/. 第一:安装配置CKEditor ,可改/admin/ckeditor/ckeditor.js来配置编辑器,如字体.背景色.语言 .界面高宽.编辑器按钮分布等  代码如下 复制代码 config.language = 'en'; config.skin =

iOS实现压缩图片上传功能_IOS

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

如何用 React 完成图片上传功能?

本文讲的是如何用 React 完成图片上传功能?, 下面这篇特邀文章是由 Damon Bauer 完成的,主题是关于一个 web 开发人员非常常见的工作:为用户提供图片上传功能.我想说这并不容易,但是有了一些功能强大的工具来帮忙做一些比较"重"的工作,这个任务会觉得比以前轻松许多.Damon 甚至全程在浏览器中完成了这项任务! 对于 web 开发者来说,让用户能够上传图片是一件很常见的事情.一开始可能看起来小菜一碟,但是当真正创建一个图片上传组件的时候,还是有些问题需要去考虑的.这里有

c# 客户端 调用 java Webservice 实现图片上传功能

问题描述 c# 客户端 调用 java Webservice 实现图片上传功能 no SOAPAction header c#端添加服务引用 生成实体类 直接调用webservice图片上传方法 结果报错**no SOAPAction header** 解决方案 有没有大神 来帮帮忙 解决方案二: 参考这个:http://blog.csdn.net/wxyong3/article/details/38727503

ckeditor的图片上传服务器小图能上传到服务器,大图却不行

问题描述 ckeditor的图片上传服务器小图能上传到服务器,大图却不行 这是小图这是大图 解决方案 解决方案二: 解决方案三: 你动态页用的什么?asp还是asp.net?图片多大? asp默认只能200kb,asp.net是4M