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

 更新时间:2019年09月23日 14:46:23   作者:怕是不尽芳华  
今天小编就为大家分享一篇layui 富文本图片上传接口与普通按钮 文件上传接口的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

富文本-图片上传

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 富文本图片上传接口与普通按钮 文件上传接口的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 禁用Enter键表单自动提交实现代码

    禁用Enter键表单自动提交实现代码

    这篇文章主要介绍了禁用Enter键表单自动提交实现代码,需要的朋友可以参考下
    2014-05-05
  • 引入JS文件IE6报语法错误或缺少对象问题的解决方法

    引入JS文件IE6报语法错误或缺少对象问题的解决方法

    引入JS文件IE6报错或缺少对象问题想必很多朋友都有遇到过吧,这个问题在于文件编码上,下面为大家介绍下比较不错的解决方法
    2014-01-01
  • javascript 读取图片文件的大小

    javascript 读取图片文件的大小

    今天弄了一个附件图片上传的,为了写一个检测,很麻烦,后来,发现一个比较巧妙的方法
    2009-06-06
  • javascript删除元素节点removeChild()用法实例

    javascript删除元素节点removeChild()用法实例

    这篇文章主要介绍了javascript删除元素节点removeChild()用法,实例分析了removeChild()方法移除节点的使用技巧,需要的朋友可以参考下
    2015-05-05
  • three.js如何实现3D动态文字效果

    three.js如何实现3D动态文字效果

    这篇文章主要给大家介绍了关于three.js如何实现3D动态文字效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 中国地区三级联动下拉菜单效果分析

    中国地区三级联动下拉菜单效果分析

    主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,本文将详细介绍
    2012-11-11
  • 解决uniapp上传小程序体积过大的问题

    解决uniapp上传小程序体积过大的问题

    在昨天的工作中遇到了一个微信小程序上传代码过大的情况,在这里总结一下具体的解决步骤,首先介绍一下,技术栈是使用uniapp框架+HBuilderX的开发环境,需要的朋友可以参考下
    2023-09-09
  • Javascript中使用A标签获取当前目录的绝对路径方法

    Javascript中使用A标签获取当前目录的绝对路径方法

    这篇文章主要介绍了Javascript中使用A标签获取当前目录的绝对路径方法,本文讲解的方法比较特别,需要的朋友可以参考下
    2015-03-03
  • Web技术实现移动监测的介绍

    Web技术实现移动监测的介绍

    移动侦测,一般也叫运动检测,常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 CPU 按照一定算法进行计算和比较,当画面有变化时,如有人走过,镜头被移动,计算比较结果得出的数字会超过阈值并指示系统能自动作出相应的处理
    2017-09-09
  • 常用的js方法合集

    常用的js方法合集

    本文主要介绍了常用的js方法的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论