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 18 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
图片之间的切换
2006/06/26 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
使用Python求解最大公约数的实现方法
2015/08/20 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python进行TCP端口扫描的实现
2018/12/21 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python networkx包的实现
2020/02/14 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
汽车销售员工作总结
2015/08/12 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA