ckeditor上传图片的实现

ckeditor+ckfinder是公认的实现在线编辑并且能够上传图片的良好工具,但是对于小项目来说,用它们的组合真的是太过于浪费了,于是,小编找了很多资料,当然也终于找到了自定义的图片上传方法。

首先修改ckeditor插件中的config.js中添加

     config.filebrowserImageUploadUrl = '/index.php?m=Artical&act=ckeditor';(使用的是绝对路径,我的项目是基于MVC+Smarty的)

主类中调用方法是:

public function ckeditor() {
$imagetool = new ImageTool ();
$imagetool->uploadInArtical ();
}


ImageTool类中的方法是:

/**
  * 针对文章中上传的图片进行处理
  */
  public function uploadInArtical(){
 
 
  $this->conf['img']=array("jpg","bmp","gif","png"); //img允许后缀
 
  $this->conf['flash_size']=200; //上传flash大小上限 单位:KB
  $this->conf['img_size']=500; //上传img大小上限 单位:KB
 
  $this->conf['message']="上传成功"; //上传成功后显示的消息,若为空则不显示
  $this->conf['name']=mktime(); //上传后的文件命名规则 这里以unix时间戳来命名
 
 
  $this->conf['img_dir']='/Uploads/'; //上传img文件地址 采用绝对地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
  $this->conf['site_url']=""; //网站的网址 这与图片上传后的地址有关 最后不加"/" 可留空
 
  //文件上传
  $this->uploadfile();
 
  }
  private function uploadfile()
  {
  //判断是否是非法调用
  if(empty($_GET['CKEditorFuncNum']))
  $this->mkhtml(1,"","错误的功能调用请求");
  $fn=$_GET['CKEditorFuncNum'];
  if(is_uploaded_file($_FILES['upload']['tmp_name']))
  {
  //判断上传文件是否允许
  $filearr=pathinfo($_FILES['upload']['name']);
  $filetype=$filearr["extension"];
  if(!in_array($filetype,$this->conf['img']))
  $this->mkhtml($fn,"","错误的文件类型!");
  //判断文件大小是否符合要求
  if($_FILES['upload']['size']>$this->conf["img_size"]*1024)
  $this->mkhtml($fn,"","上传的文件不能超过".$this->conf["img_size"]."KB!");
 
  //创建路径
  $sub_dir=date('Ymd');//子目录名称
             //用于生成路径
  $file_dir=$this->_default_upload_dir.$sub_dir;//子目录路径
  //用于获取路径中的数据(然后显示到编辑框中)
  $file_dir1=$this->conf["img_dir"].$sub_dir;//子目录路径(绝对路径)
   
  $file_abso=$file_dir1.'/'.$this->conf['name'].".".$filetype;//文件保存的绝对路径(回馈给ckeditor的图片就是用这个路径)
  $file_host=$_SERVER['DOCUMENT_ROOT'].$file_abso;//文件在服务器中的路径
  //先判断子目录是否存在,如果不存在则创建子目录
  if (!is_dir($file_dir)) {
  mkdir($file_dir);
 
  if(move_uploaded_file($_FILES['upload']['tmp_name'],$file_host))
  {
  //将图片信息保存到cookie中,以便用来保存到文章数据库中(保存最后一张缩略图的信息和原图)
     setcookie('ori_img',$sub_dir.'/'.$this->conf['name'].".".$filetype);
  $thumb_img=$this->createDST($file_dir.'/'.$this->conf['name'].".".$filetype,100,100);//生成100*100尺寸的缩略图
  setcookie('artimg',$thumb_img);//用cookie保存缩略图的地址信息
  $this->mkhtml($fn,$this->conf['site_url'].$file_abso,$this->conf['message']);
  }
  else
  {
  $this->mkhtml($fn,"","文件上传失败,请检查上传目录设置和目录读写权限");
  }
  }
  }
  //输出js调用
  private function mkhtml($fn,$fileurl,$message)
  {     
  //可以输出错误信息
  //$str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\', \''.$message.'\');</script>';
  $str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\');</script>';//不用输出错误信息
  exit($str);
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本插件使用JAVA技术开发,需要配合Javascript使用,可以将网页中含有的本地图片(src为'file:///')自动上传到服务器并修改img标签的src属性为新的图片地址。典型应用场景如:配合ckEditor使用,使从WORD粘贴过来的内容中包含的本地图片自动上传到服务器。 --------------------------------------------------- 依赖环境:JDK1.7 、jQuery、ckEditor4.2、浏览器不限 --------------------------------------------------- 一般使用说明 Javascript API:   类: WordImageUploader(s_url, app_name) s_url:图片上传的服务器页面地址,为动态页面,如servlet、PHP等; app_name:当前应用的名称   在使用本插件前必须首先创建本类的对象,一个页面中最好只存在一个本对象,本类的创建方法如: var uploader = new WordImageUploader(sUrl,appName);   该类的方法有: uploadWordImagesFromCKEditor(editorInstance, pre_id) 本方法用于将CKEditor中的从WORD粘贴过来的文本中的所有本地图片自动上传到服务器,参数意义如下: editorInstance:CKEditor的实例; pre_id:图片上传到服务器后的名称的前辍,方便日后清理等维护工作,如不需要,设为'';   uploadLocalFile(localUrl, name) 本方法用于将单独本地图片上传到服务器,参数意义如下: localUrl:图片的本地URL,一般形式为:file:///xxx name:图片的名称   使用步骤:   1、引入jQuery类库; 2、引入js文件夹下的wordimage_uploader.js; 3、创建WordImageUploader对象; 4、ckEditor内容改变时调用uploadWordImagesFromCKEditor方法。 插件安装完成后应在网页状态档位置显示“监控台:欢迎使用“本地图片自动上传插件”。 --------------------------------------------------- 本插件支持所有动态网站技术,DEMO所用技术为jsp,服务器端接受上传文件的动态页面为一Servelt:WordImageUploader.java,此文件已经在DEMO中给出,其它动态网站技术请参照此文件自行实现。 --------------------------------------------------- 其它使用详情请参见DEMO源码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值