<script type="text/javascript" src="/statics/js/kindeditor/kindeditor-min.js"></script>
  <script type="text/javascript" src="/statics/js/kindeditor/zh_CN.js"></script>
  <script type="text/javascript" src="/statics/js/uploadify/jquery.uploadify.min.js"></script>
  <script type="text/javascript" src="/statics/js/kindeditor/default/default.css"></script>
  <script charset="utf-8" src="/statics/js/kindeditor/plugins/code/prettify.js"></script>
  <link rel="stylesheet" href="/statics/js/kindeditor/plugins/code/prettify.css" />

html:

<div class="form-group">
                            <label class="col-md-2 control-label">文章内容:</label>
                           <div class="col-md-9">
                                (分页符为:
                                <span style="color: red">#p#分页-标题#e#)</span>
                                <span>
                                <label>
                                <input id="autolitpic" type="checkbox">
                                提取第一个图片为缩略图
                                </label>
                                (
                                <a class="qximg" href="javascript:void();">[取消缩略图]</a>
                                )
                                </span>
                            <span style="color: red">*</span>
                            <div class="onShow" id="dr_content_tips">必填项,可无限输入,没有字数限制.</div>
                              <label class="textarea"><textarea name="content" id="content" class="content" onblur="content_validate()">{$info.content|default=''}</textarea>
                                <input type="hidden" name="parse" value="0"> <script
                                    type="text/javascript">
                                    var editor_content1;
                                    KindEditor.ready(function(K) {
                                        editor_content1 = K.create('textarea[name="content"]', {
                                            allowFileManager : false,
                                            themesPath: K.basePath,
                                            width: '900px',
                                            height: '700px',
                                            resizeType: 1,
                                            pasteType : 2,
                                            urlType : 'absolute',
                                            cssPath : '/statics/js/kindeditor/plugins/code/prettify.css',
                                            uploadJson : '{:U('ke_upimg')}',
                                            afterCreate : function() {
                                                this.sync();
                                                  },
                                            afterBlur:function(){
                                                 this.sync();
                                               }   
                                        });
                                        prettyPrint();
                                    });    
                                    </script>
                            </label>
                        </div>
                        </div>

//后台代码

//keditor编辑器上传图片处理
    public function ke_upimg(){
        /* 返回标准数据 */
        $return  = array('error' => 0, 'info' => '上传成功', 'data' => '');
        $img = $this->upload();
        /* 记录附件信息 */
        if($img){
            $return['url'] = $img['fullpath'];
            unset($return['info'], $return['data']);
        } else {
            $return['error'] = 1;
            $return['message']  = session('upload_error');
        }
    
        /* 返回JSON数据 */
        exit(json_encode($return));
    }
    
    
        /* 上传图片 */
    public function upload(){
        session('upload_error', null);
        /* 上传配置 */
        $setting = C('EDITOR_UPLOAD');
    
        /* 调用文件上传组件上传文件 */        
        $config = array(
            'maxSize' => 3145728,
            'savePath' => './news/',
            'saveName' => array('uniqid',''),
            'exts' => array('jpg', 'gif', 'png', 'jpeg'),
            'autoSub' => true,
            'subName' => array('date','Ymd'),
        );
        $this->uploader = new \Think\Upload($config, 'Local');
        $info = $this->uploader->upload($_FILES);
        //Log::write(print_r($info));
        if($info){
            $url = '/Uploads'.$info['imgFile']['savepath'].$info['imgFile']['savename'];
            $url = str_replace('./', '/', $url);
            $info['fullpath'] = __ROOT__.$url;
        }
        
        session('upload_error', $this->uploader->getError());
        
        return $info;
    }
    
    /**
     * 上传图片
     */
    public function uploadPicture(){
        //TODO: 用户登录检测
        /* 返回标准数据 */
        $return  = array('status' => 1, 'info' => '上传成功', 'data' => '');
        
        $config = array(
                'maxSize' => 3145728,
                'savePath' => './news/',
                'saveName' => array('uniqid',''),
                'exts' => array('jpg', 'gif', 'png', 'jpeg'),
                'autoSub' => true,
                'subName' => array('date','Ymd'),
        );
        $this->uploader = new \Think\Upload($config, 'Local');
        $info = $this->uploader->upload($_FILES);
        
        /* 记录图片信息 */
        if($info){
            $url = '/Uploads'.$info['download']['savepath'].$info['download']['savename'];
            $url = str_replace('./', '/', $url);
            $return['path'] = __ROOT__.$url;
            $return['id'] = 111;
            $return['status'] = 1;
            $return = array_merge($info['download'], $return);
        } else {
            $return['status'] = 0;
            $return['info']   = $this->uploader->getError();
        }

/* 返回JSON数据 */
        $this->ajaxReturn($return);
    }

js脚本,提取第一张图片:

//获取第一张图片
$('#autolitpic').click(function (){
    if($(this).attr('checked')){
        $(this).attr('checked',false);
    }else {
        $(this).attr('checked',true);
         var content=$('.content').val();
         if(content.match(/src="[^"]+"/g)==null){
            alert('文章内容没有图片');
            return;
          }else{
               var strcount=content.match(/src="[^"]+"/g)[0].replace("src=\"","");
               var val=strcount.substring(0,strcount.length-1).replace("http://cb2013.tdedu.org","");
               $("#thumb_img").attr('src',val);
               $("#img").val(val);
           }
        }
    });

//取消缩略图
$('.qximg').click(function (){
    $("#thumb_img").attr('src',"");
    $("#img").val("");
});

keditor_php图片上传的更多相关文章

  1. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  2. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  4. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  5. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  6. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  7. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  8. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  9. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 1.6.8 Content Streams

    1. Content Streams 当RequestHandlers请求基于URL路径来访问时,SolrQueryRequest包含了请求的参数,同样包含了ContentStreams(包含了大容量 ...

  2. iOS 网络/本地 图片 按自定义比例缩放 不失真 方法

    我尝试了很多种方法,终于,设计了一个方法,能按自己规定的大小压缩 还没失真 如果以后不好用 我再升级 分享给大家: + (CGRect )scaleImage:(UIImage *)image toS ...

  3. [Java] Servlet 3 —— 用Java生成GET/POST请求

    Servlet是SUN指定的Java服务器端编程规范,用以处理来自客户端的请求,处理并做出响应的一套基础API.Servlet是运行在 Servlet容器中的Java小程序,容器运行在服务器端,服务器 ...

  4. 沈逸老师PHP魔鬼特训笔记(8)

    创建模板文件: 这节课老师带领我们开始创建TEMPLATE,按照老师教导的思路,我们希望这样一种代码写法:1.譬如我定义一个变量$name=‘’;2.然后呢我读取一个模板.3.再然后我在这个模板里 设 ...

  5. batchExportPNG.py不是我的代码

    #coding=gbk#@author lifc,20140806#批量制作输出专题图import arcpy,os,time,math #testpath=raw_input("testp ...

  6. iOS - UI - UIWebView

    1.UIWebView UIWebView 是 苹果提供的用来展示网页的UI控件.它也是最占内存的控件. iOS8.0 webkit框架. WKWebView,相比UIWebView,节省了1/3~1 ...

  7. WebStrom9 体验nodejs

    之前就有体验过 WebStrom8.0.3 版本,确实不错. 最喜欢的是集成了Terminal 很方便的使用NPM,今天装上发现 Terminal 死活打不上字.什么原因! WebStrom9 在wi ...

  8. 【java.math.BigInteger】常用函数

    1. /* 返回此BigInteger的函数正负号. 此方法返回-1,0或1作为此BigInteger的值对应是负,零或正数. */ java.math.BigInteger.signum(BigIn ...

  9. 【转】关于loadrunner中设置进程和线程的区别

    loadrunner中,在进行运行设置中有一项选择,是按进程运行Vuser或按线程运行Vuser?下面进行分别来讲: 1.按进程运行Vuser:Controller将使用驱动程序mdrv运行Vuser ...

  10. 数据库自定义表值函数Split(@LongStr, @SplitStr, @IsDistinct )

    CREATE FUNCTION [dbo].[F3_Split](@LongStr VARCHAR(MAX),@SplitStr VARCHAR(100),@IsDistinct BIT)RETURN ...