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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 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;java(一)
2006/10/09 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
windows系统下Python环境搭建教程
2017/03/28 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
毕业生如何写自我鉴定
2014/03/15 职场文书
学生鉴定评语大全
2014/05/05 职场文书
董事会决议范本
2015/07/01 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript