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判断图片尺寸大小实例分析
Jun 16 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
深入探索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
用Flash图形化数据(二)
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
二招解决php乱码问题
2012/03/25 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
个人承诺书
2014/03/26 职场文书
绿色环保标语
2014/06/12 职场文书
职代会闭幕词
2015/01/28 职场文书
介绍信范文
2015/01/31 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
招商银行收入证明
2015/06/17 职场文书
社区服务活动感想
2015/08/11 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android