<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">

    <script type="text/javascript" src='/static/js/jquery-3.2.1.min.js'></script>

    <script type="text/javascript" src='/static/layui/layui.js'></script>

    <title></title>

</head>

<body>

<div class="right" style="margin: 90px 0 0 190px;">

    <form action="{:url('goods/doadd')}" enctype="multipart/form-data" method="post">

            <textarea class="layui-textarea" id="LAY_demo1" name="details" style="display: none;">

            </textarea>

        <input type="submit" name="" value="提交">

    </form>

</div>

</body>

<script>

layui.use('layedit', function(){

  var layedit = layui.layedit;

  layedit.set({

      uploadImage: {

        url: '/admin/goods/uploadImage' //接口url

        ,type: 'post', //默认post

        success:function(res){

        }

      }

    });

  //构建一个默认的编辑器

  var index = layedit.build('LAY_demo1',{

    height:800

  });

  //编辑器外部操作

  var active = {

    content: function(){

      alert(layedit.getContent(index)); //获取编辑器内容

    }

    ,text: function(){

      alert(layedit.getText(index)); //获取编辑器纯文本内容

    }

    ,selection: function(){

      alert(layedit.getSelection(index));

    }

  };

  $('.site-demo-layedit').on('click', function(){

    var type = $(this).data('type');

    active[type] ? active[type].call(this) : '';

  });

  //自定义工具栏

  layedit.build('LAY_demo2', {

    tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']

    ,height: 100

  })

});

</script>

</html>

　　php后端

public function uploadImage(Request $request)

    {

//thinkphp5的框架，如果是原生的，用$_FiLES['file']获取到图片，

        $file 	= $request->file('file');

        $info 	= $file->move(ROOT_PATH . 'public' . DS . 'uploads');

        if($info){

             $name_path =str_replace('\\',"/",$info->getSaveName());

                $result['data']["src"] = "/uploads/layui/".$name_path;

            $url 	= $info->getSaveName();

            //图片上传成功后，组好json格式，返回给前端

            $arr   = array(

                'code' => 0,

                'message'=>'',

                'data' =>array(

                    'src' => "/uploads/".$name_path

                    ),

                );

        }

        echo json_encode($arr);

    }

　　示例图片

layui 富文本 图片上传 后端PHP接口的更多相关文章

  1. summernote富文本图片上传，增加视频上传功能、批量上传方法

    Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...

  2. vue-quill-editor + element-ui upload实现富文本图片上传

    代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...

  3. layui加tp5图片上传实例

    <div class="layui-fluid"> <div class="layui-row"> <form class=&qu ...

  4. 【Django组件】KindEditor富文本编辑器上传文件，html样式文本，VUE异步提交数据(易懂版)

    1:下载与配置 适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入stati ...

  5. 入坑微信小程序必经之路（六）图片上传服务器——WebSercice接口

    wxml文件 <view class="weui-uploader"> <view class="img-v weui-uploader__bd&quo ...

  6. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  7. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  8. .Net之Layui多图片上传

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

  9. .net mvc + layui做图片上传（二）—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

随机推荐

  1. leetcode283

    public class Solution { public void MoveZeroes(int[] nums) { ; ; i < nums.Length; i++) { //[0, 1, ...

  2. SpringMVC Get请求传集合，前端"异步"下载excel 附SpringMVC 后台接受集合

    最近项目上管理后台需要自己做一部分js部分,之前都是前端来弄...碰到了下载excel,刚开始使用ajax,搞了好久发现不合适..下载不了,网上说ajax返回类型不支持二进制流.. 因此采用 wind ...

  3. GDI+_SavePic

    Option Explicit Private Const EncoderQuality As String = "{1D5BE4B5-FA4A-452D-9CDD-5DB35105E7EB ...

  4. C语言中 .h文件和.c文件的区别

    要理解.c文件与.h文件有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成纯汇编语句,再将之汇编成跟CP ...

  5. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  6. Python设计模式 - 创建型 - 单例模式(Singleton) - 十种

    对于很多开发人员来说,单例模式算是比较简单常用.也是最早接触的设计模式了,仔细研究起来单例模式似乎又不像看起来那么简单.我们知道单例模式适用于提供全局唯一访问点,频繁需要创建及销毁对象等场合,的确方便 ...

  7. 数组中的逆序对(python)

    题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%1000 ...

  8. I/O系统（一）

    输入输出系统的发展大致可以分为4个阶段1.早期阶段 特点:    1.1每个IO设备都得有一套独立的逻辑电路和CPU相连.    1.2输入输出过程需要通过CPU,穿插在程序运行的过程中,处理IO时候 ...

  9. Linux磁盘空间分析及清理（df、du、rm）

    1.df磁盘空间查看 df可以查看一级文件夹大小.使用比例.档案系统及其挂入点. [root@oms ~]# df -Th Filesystem Type Size Used Avail Use% M ...

  10. Python开发——数据类型【列表】

    列表的定义 中括号[]内以逗号分隔开,按照索引,存放各种数据类型,每个位置代表一个元素 list_t = ['张三','Lucy',123] print(list_t) # ['张三', 'Lucy' ...