layui 富文本 图片上传 后端PHP接口
时间:2019-04-19
本文章向大家介绍layui 富文本 图片上传 后端PHP接口,主要包括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); }
示例图片
- 我们是如何将 Cordova 应用嵌入到 React Native 中
- ADO.NET的弹性连接控制[ADO.NET idle connection resiliency]
- ASP.Net MVC 5 in Xamarin Studio 5.2
- 自制基于 Snips 和 Snowboy 的智能音箱来保护你的隐私
- 从 React 将从 BSD 改 MIT 许可证,谈如何选择正确的开源许可
- Topshelf 支持Mono 扩展Topshelf.Linux
- 如何在 React Native 实现类微信小程序平台:WebView 调用原生组件
- 如何运营一个开源项目并取得较大影响力?
- ASP.NET Identity 2新增双重认证、帐号锁定、防伪印章功能并修复了一些bug
- Serverless 应用开发指南:基于 Serverless 与 Lambda 的微信公共平台
- Serverless 应用开发指南:serverless 的 hello, world
- 通过一组RESTful API暴露CQRS系统功能
- 通过使用结构化数据 JSON-LD,我为网站带来了更多的流量
- 使用 OWIN Self-Host ASP.NET Web API 2
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- laravel实现于语言包的完美切换方法
- PHP校验15位和18位身份证号的类封装
- 用Echarts打造一个轮播图!
- Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
- PHP 获取客户端 IP 地址的办法实例代码
- laravel http 自定义公共验证和响应的方法
- Windows服务器中PHP如何安装redis扩展
- NBA投篮数据可视化,4行代码就能实现!
- Laravel框架实现文件上传的方法分析
- PHP集成环境XAMPP的安装与配置
- Laravel解决nesting level错误和隐藏index.php的问题
- PHP反射原理与用法深入分析
- Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
- laravel Validator ajax返回错误信息的方法
- Linux下 php7安装redis的办法