layui 富文本 图片上传 后端PHP接口
<!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接口的更多相关文章
- summernote富文本图片上传,增加视频上传功能、批量上传方法
Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...
- vue-quill-editor + element-ui upload实现富文本图片上传
代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...
- layui加tp5图片上传实例
<div class="layui-fluid"> <div class="layui-row"> <form class=&qu ...
- 【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)
1:下载与配置 适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入stati ...
- 入坑微信小程序必经之路(六)图片上传服务器——WebSercice接口
wxml文件 <view class="weui-uploader"> <view class="img-v weui-uploader__bd&quo ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- .net mvc + layui做图片上传(一)
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
- .Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
随机推荐
- python_08 函数式编程、高阶函数、map、filter、reduce函数、内置函数
函数式编程 编程方法论: 1.面向过程 找到解决问题的入口,按照一个固定的流程去模拟解决问题的流程 (1).搜索目标,用户输入(配偶要求),按照要求到数据结构内检索合适的任务 (2)表白,表白成功进入 ...
- TCC细读 - 2 核心实现
TCC,基于业务层面的事物定义,粒度完全由业务自己控制,本质上还是补偿的思路,它把事物运行过程分为try-confirm-cancel阶段,每个阶段逻辑由业务代码控制 业务活动管理器控制业务活动的一致 ...
- K8s之配置文件kubeconfig生成
在开启了 TLS 的集群中,每当与集群交互的时候少不了的是身份认证,使用 kubeconfig(即证书) 和 token 两种认证方式是最简单也最通用的认证方式. 以kubectl为例介绍kubeco ...
- 源码解析之AQS源码解析
要理解Lock首先要理解AQS,而要理解并发类最好的方法是先理解其并发控制量不同值的含义以及该类运作流程,然后配合一步步看源码.该类有一个重要的控制量是WaitStates,节点的状态值. /** w ...
- 2018面向对象程序设计(Java)第17周学习指导及要求
2018面向对象程序设计(Java)第17周学习指导及要求(2018.12.20-2018.12.23) 学习目标 (1) 掌握线程同步的概念及实现技术: (2) Java线程综合编程练习 学习资 ...
- OpenStack 安装:基本环境准备
刚刚学完openstack,这几篇文章就算对过去课程的一个总结吧. 首先说说基本的结构:在一台Dell的workstation上面安装了VMware,在VMware上面安装两台CentOS,现在给每台 ...
- Cobbler安装CentOS7系统时报错 What do you want do now?
问题的根源: 在cobbler服务主机中执行了 createrepo --update /var/www/cobbler/ks_mirror/CentOS-7-x86_64/ 导致的. cobbl ...
- cmd中sudo以后显示password不能输入密码
文本界面还是图形界面下输入密码都不会有回显,这是为了安全考虑. 其实你不是不能输入密码只是你看不到而已,事实上你已经输入进去了,回车后就能看到效果了. 来源于:https://zhidao.baidu ...
- eclipse中tomcat可以start启动,无法debug启动的解决
设置断点,进行程序调试,但是debug启动tomcat,却无法启动,并且会报超时异常. 原因可能是eclipse和tomcat启动时读取文件发生冲突 去掉所有的断点,然后重新debug启动,再设置断点 ...
- canvas(三) star- demo
/** * Created by xianrongbin on 2017/3/8. * 本例子使用渐变画出 璀璨星空 */ var dom = document.getElementById('clo ...