ThinkPHP是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。遵循Apache2开源许可协议发布,意味着你可以免费使用ThinkPHP,甚至允许把你基于ThinkPHP开发的应用开源或商业产品发布/销售。

ThinkPHP5.0版本是一个颠覆和重构版本,采用全新的架构思想,引入了更多的PHP新特性,优化了核心,减少了依赖,实现了真正的惰性加载,支持composer,并针对API开发做了大量的优化,包括路由、日志、异常、模型、数据库、模板引擎和验证等模块都已经重构,不适合原有3.2项目的升级,请慎重考虑商业项目升级,但绝对是新项目的首选(无论是WEB还是API开发)。

  layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

  Layui上传图片文档

  

  Thinkphp5上传文件文档

  !注意:由于layui上传的时候name默认为file即后台接收数据代码应该如下↓

$file = request()->file('file');

   Html丶Javascript:

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<!--引入js和css文件-->
<link rel="stylesheet" href="__AdminCss__/font.css">
<link rel="stylesheet" href="__AdminCss__/xadmin.css">
<script type="text/javascript" src="__AdminStatic__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__AdminJs__/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<img id="preview" width="200px" height="200px">
</div>
</div>
<script>
layui.use('upload', function () {
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
, url: '{:url("common/upload")}' //上传接口
, done: function (res) {
$('#preview').attr('src', res.info); //图片链接
}
, error: function () {
//请求异常回调
}
});
});
</script>
</body>
</html>

PHP:

<?php
namespace app\admin\controller; use think\Controller; class Common extends Controller
{
/**上传文件 接口*/
public function upload()
{
$file = request()->file('file'); //获取上传文件信息
$info = $file->move('./upload/'); //上传地址
$picUrl = '/upload/' . $info->getSaveName(); //拼接 图片地址
if ($info) {
return (json_encode(array('status' => 1, 'msg' => 'test', 'info' => $picUrl)));
}
}
}

示意图:

Thinkphp5+Layui上传图片的更多相关文章

  1. Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径

    Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径 Tomcat 配置虚拟路径 找到 eclipse 中 tomcat 下面的 server.xml 文件,在 Host 标签里面添加 < ...

  2. thinkphp结合layui上传图片

    简单示例: <script type="text/javascript"> layui.use(['form', 'layedit','element', 'layda ...

  3. layui 上传图片 实现过程

    layui.user一个页面只能有一个,写多了会实现js效果 上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件 ...

  4. Layui上传图片 带接口

    layui.use('upload', function () { var upload = layui.upload; upload.render({ elem: '#LAY_avatarUploa ...

  5. 上传头像,layui上传图片

    layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用 先看一下前台界面,这里是用到的上传头像 先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...

  6. layui——上传图片,并实现放大预览

    一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...

  7. Thinkphp5封装上传图片

    <?php namespace app\api\controller; use think\Controller; use think\Db; class Plus extends Base{ ...

  8. thinkphp5+layui多图片上传

    准备资料 下载layui <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

随机推荐

  1. 微信小程序之简单记账本开发记录(三)

    昨天已经编辑了主界面,在wxml文件中设置好跳转链接之后,就可以进行下一步的开发了 在pages中建立一个新的页面文件夹作为之后的支出页面 编辑后台,今天先搭建大致界面

  2. 页面ajax请求传参及java后端数据接收

    js ajax请求传参及java后端数据接收 Controller: package com.ysl.PassingParameters.controller; import java.util.Li ...

  3. ICEM-圆环孔

    原视频下载地址:https://yunpan.cn/cSKwAIRmFLGe5  访问密码 49c5

  4. 快速上手系列-C语言之指针篇(一)

    快速上手系列-C语言之指针篇(一) 浊酒敬风尘 发布时间:18-06-2108:29 指针的灵活运用使得c语言更加强大,指针是C语言中十分重要的部分,可以说指针是C语言的灵魂.当然指针不是万能的,但没 ...

  5. 《梁宁·产品思维30讲》课程学习笔记(内含全套音频+ppt资料

    科技进步.产品迭代.公司演化.组织变迁……不变的是用户的情绪和人性. 那些信奉“用户驱动”的人,从普通人变成了行业大佬,建立了自己的世界.乔布斯.马化腾.马云.雷军.张小龙.周鸿祎.傅盛……这些改变世 ...

  6. 安装python3的详细教程

    环境:CentOS 7 1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-dev ...

  7. PHP学习之观察者模式

    <?php //观察者模式涉及到两个类 //男人类 和女朋友类 //男人类对象小明, 女朋友类对象小花.小丽 class Man { //用了存放观察者 protected $observers ...

  8. JMeter-jp@gc - PerfMon Metrics Collector-CPU监控工具的配置及使用(win版本)

    服务器端放这个 如果端口号被占用,默认报这个错: 如果默认的4444端口被占用的修改: C:\Users\Administrator>CD E:\E:\apache-jmeter-4.0\Ser ...

  9. C#winform和百度API互动-----之JS读取中C#中的函数

    例子1 线上JS var getcpylocation =window.external.getlocation(); map.centerAndZoom(getcpylocation,12); C# ...

  10. python 学生表

    1,主页面函数(01-mainpage.py) import json import file_manager import student_system ''' ''' # 全局变量 file_na ...