热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇layui富文本图片上传接口与普通按钮文件上传接口的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

富文本-图片上传

html:

js:记得之前引入layui.js


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 :

建议尺寸168*168,支持jpg、png、gif,最大不能超过50KB

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


推荐阅读
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 本文详细介绍如何在VSCode中配置自定义代码片段,使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例,展示配置步骤及效果。 ... [详细]
  • 在网页开发中,页面加载速度是一个关键的用户体验因素。为了提升加载效率,避免在PageLoad事件中进行大量数据绑定操作,可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]
  • 深入解析JMeter中的JSON提取器及其应用
    本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时,JSON提取器是一个非常有用的工具。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • 本文详细介绍了流编辑器sed中的G、H、g、h命令,探讨了它们的工作原理及应用场景。通过实例解析和图解分析,帮助读者掌握这些高级命令的使用方法。 ... [详细]
  • HTML基础入门指南
    本文将深入浅出地介绍HTML的基础知识,包括其定义、开发工具、制定机构、特性、基本标签及更多实用内容。 ... [详细]
author-avatar
zavier
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有