layui 富文本图片上传接口与普通按钮 文件上传接口的例子


Posted in Javascript onSeptember 23, 2019

富文本-图片上传

html:

<div class="layui-form-item layui-form-text">
 <div class="layui-input-block">
  <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="详细描述" class="layui-textarea fly-editor" style="height: 260px;"></textarea>-->
  <textarea id="L_content" name="contents" placeholder="详细描述" style="display: none;"></textarea>
 </div>
</div>

js:记得之前引入layui.js

<script>
 layui.use('layedit', function(){
 var layedit = layui.layedit;
 layedit.set({
  uploadImage: {
  url: '{:url("index/index/lay_img_upload")}', //接口url
  type: 'post' //默认post
  }
 });
 layedit.build('L_content'); //建立编辑器
 });
</script>

tp:

// 图片上传接口
 public function lay_img_upload()
 {
 $file = Request::instance()->file('file');
 if(empty($file)){
  $result["code"] = "1";
  $result["msg"] = "请选择图片";
  $result['data']["src"] = '';
 }else{
  // 移动到框架应用根目录/public/uploads/ 目录下
  $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/layui' );
  if($info){
  $infos = $info->getInfo();
  // 源文件名
  $name = $infos['name'];
 
  $name_path =str_replace('\\',"/",$info->getSaveName());
  //成功上传后 获取上传信息
  $result["code"] = '0';
  $result["msg"] = "上传成功";
  $result['data']["src"] = "/forum/public/uploads/layui/".$name_path;
  $result['data']["title"] = $name;
  }else{
  // 上传失败获取错误信息
  $result["code"] = "2";
  $result["msg"] = "上传出错";
  $result['data']["src"] ='';
  }
 }
 
 return json_encode($result);
 
 }

普通点击button 文件上传

html :

<div class="layui-form layui-form-pane layui-tab-item">
  <div class="layui-form-item">
  <div class="avatar-add">
  <p>建议尺寸168*168,支持jpg、png、gif,最大不能超过50KB</p>
   <input type="hidden" name="userImage" value="${ui.userImage }" required lay-verify="required" />
   <!--<button type="button" class="layui-btn upload-img " id="fileBtn">-->
   <button type="button" class="layui-btn layui-btn-primary" id="fileBtn" style="position: absolute;left: 50%;top: 35px;margin: 0 0 0 -56px;">
   <i class="layui-icon">?</i>上传头像
  </button>
 
 
  <img src="{$user.profile_img}">
  <span class="loading"></span>
  </div>
  </div>
  </div>

js :

layui.use('upload',function(){
  var upload = layui.upload;
  upload.render({
  elem: '#fileBtn'//绑定元素
  ,url: "{:url('index/personal/modifyImg')}" //上传接口
  ,accept: 'images'
  ,auto: true //属性详见http://www.layui.com/doc/modules/upload.html
  // ,bindAction: '#uploadBtn'
   ,done: function(res){
   alert(res.data.src);
   $("[name=userImage]").val(res.data.src);
   }
  });
  });

tp:

public function modifyImg()
 {
 $file = Request::instance()->file('file');
 if(empty($file)){
  $result["code"] = "1";
  $result["msg"] = "请选择图片";
  $result['data']["src"] = '';
 }else{
  // 移动到框架应用根目录/public/uploads/ 目录下
  $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/user' );
 
  if($info){
  $infos = $info->getInfo();
  // 源文件名
  $name = $infos['name'];
 
  $name_path =str_replace('\\',"/",$info->getSaveName());
  //成功上传后 获取上传信息
  $result["code"] = '0';
  $result["msg"] = "上传成功";
  $result['data']["src"] = "/forum/public/uploads/user/".$name_path;
  $result['data']["title"] = $name;
  }else{
  // 上传失败获取错误信息
  $result["code"] = "2";
  $result["msg"] = "上传出错";
  $result['data']["src"] ='';
  }
 }
 
 return json_encode($result);
 }

以上这篇layui 富文本图片上传接口与普通按钮 文件上传接口的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JS中Location使用详解
May 12 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
小程序实现锚点滑动效果
Sep 23 #Javascript
React Native 混合开发多入口加载方式详解
Sep 23 #Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 #Javascript
Electron 调用命令行(cmd)
Sep 23 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
python重试装饰器示例
2014/02/11 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Hibernate持久层技术
2013/12/16 面试题
大专毕业生求职信
2014/07/05 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
无工作证明怎么写
2015/06/15 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
mysql函数全面总结
2021/11/11 MySQL
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python