keditor_php图片上传

<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("");
});

时间: 2024-10-05 16:50:55

keditor_php图片上传的相关文章

jq upload图片上传代码

/* * 图片上传 * */ function postImgData() { $("#addFileInfo input[name='file']").change(function () { console.log($(this).val()) if (!$(this).val()) { return } var fileTyle = $(this).val().split("."); console.log(fileTyle); if (fileTyle[1]

[项目构建 五]babasport ajax图片上传及FastDFS入门案例.

今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jquery.form.js剩下的一个是FastDFS, 那么什么是FastDFS呢? FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题,特别适合以中小文

ckeditor4.5.1配置图片上传的方法

本篇博文主要面向初学者,一步一步地实现ckeditor的图片上传,欢迎各位大神指正. ckeditor的图片上传默认是关闭的,网上也有很多相关的教程,可是不是讲的不完整,就是版本太旧已经不适用.我写这篇博文主要面向初学者,有错误的地方欢迎指正. 截止本文撰写,ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用,请下载同一版本尝试. 1.开启图片上传界面 文件地址:ckeditor/plugins/image/dialogs/image.js 搜索

数往知来 JQuery 图片上传_水印 &lt;二十二&gt;

一.图片上传  :enctype='multipart/form-date 首先在进行文件上传时,添加form表单中的enctype属性指定enctype='multipart/form-date', 文件数据发送给服务端,并不是把文件路径发送给服务端了,它会随机生成一个分割字符串, 把每一个表单元素分割开 <form method='post' action='' enctype='multipart/form-date'> //这里的enctype是提交请求报文的报文体的一种编码格式, 默

微信端调取相册和摄像头,实现图片上传,并上传到本地服务器

在微信公众号网页开发时,遇到了图片上传的问题,查看了微信的开发者文档,里面的资料比较全.接着我们看一下整个的流程 1.config权限配置 $.ajax({ url:'wx_getConfig', type:'get', dataType:'json', async:false, success:function(data){ var appId = data[0].appId; var timestamp = data[0].timestamp; var nonceStr = data[0].

java图片上传(mvc)

最近有开始学起了java,好久没写文章了,好久没来博客园了.最近看了看博客园上次写的图片上传有很多人看,今天在一些篇关于java图片上传的.后台接收用的是mvc.不墨迹了,直接上图. 先看目录结构.idea开发. 一.图片上传还是使用的这款jq插件.前端部署这款插件,不用说了吧.效果图       二.前台代码只需要盖一个位置.因为是比较好用的插件.插件样式自行修改. 三.后台代码. 后面看不见的. 这个图片上传主要是自己写了几个函数.让图片储存更加方便.分成了年月日储存.但是后期遍历比较困难,

.net core CKEditor 图片上传

最近在玩 asp.net core,不想用UEditor,想使用CKEditor.故需要图片上传功能. 废话不多说,先上效果图: CKEditor 前端代码: <text id="content" name="content"></text> <script> CKEDITOR.replace('content'); </script> CKeditor config.js 配置代码:需要配置图片上传路径 CKEDIT

微信JS-SDK接口 + FLASK实现图片上传

最近在做一个项目从全球各地采集图片,考虑采用微信JS-SDK来简化开发.图片会首先上传到微信的服务器,返回一个id,然后根据这个id去微信服务器获取图片.微信提供可选择的压缩图片功能.图片首先上传到微信的服务器,可以保障较好的上传稳定性. 详细内容请参考微信的官方文档:微信JS-SDK说明文档 运行页面如下 HTML 在微信demo的基础上修改,见微信JS-SDK DEMO页面 增加图片的多次选择,多次上传,删除等功能 uploadImage.html <!DOCTYPE html> <

CKEditor图片上传实现详细步骤(使用Struts 2)

本人使用的CKEditor版本是3.6.3.CKEditor配置和部署我就不多说. CKEditor的编辑器工具栏中有一项"图片域",该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传. "预览"中有一大堆鸟语,看得很不爽.可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索"b.config.image_previewText"就能找到这段鸟语了,(b.config.image_prev