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. AcWing：244. 谜一样的牛（树状数组 + 二分）

    有n头奶牛,已知它们的身高为 1~n 且各不相同,但不知道每头奶牛的具体身高. 现在这n头奶牛站成一列,已知第i头牛前面有AiAi头牛比它低,求每头奶牛的身高. 输入格式 第1行:输入整数n. 第2. ...

  2. 解决Maven的jar包冲突问题

    1. 问题描述 控制台说:无法将 com.zpx.servlet.MyServlet 识别为 javax.servlet.Servlet 2. 问题原因 Maven的一个核心功能就是一键构建,所以Ma ...

  3. Linux设备驱动程序 之 kmalloc

    原型 kmalloc的原型如下: void *kmalloc(size_t size, gfp_t flags) 第一个参数是要分配的块的大小,第二个参数是分片标志: flags标志 最常用的标志是G ...

  4. fastadmin 增加外键表搜索

    1.老规矩,先上效果图  (例子:https://ask.fastadmin.net/question/1035.html) 2.  关键字眼  selectpage

  5. [Java读书笔记] Effective Java(Third Edition) 第 4 章 类和接口

    第 15 条: 使类和成员的可访问性最小化 软件设计基本原则:信息隐藏和封装. 信息隐藏可以有效解耦,使组件可以独立地开发.测试.优化.使用和修改.   经验法则:尽可能地使每个类或者成员不被外界访问 ...

  6. sysbench 压测

    IP架构 sysbench部署服务器:172.17.100.107 压测服务器:172.17.100.100 MySQL部署目录:/usr/local/mysql 前置工作 1.完成MySQL的安装( ...

  7. 连接池中的maxIdle,MaxActive,maxWait参数

    连接池中的maxIdle,MaxActive,maxWait参数 线程池 name:表示你的连接池的名称也就是你要访问连接池的地址 auth:是连接池管理权属性,Container表示容器管理 typ ...

  8. Onvif协议及其在Android下的实现

    好久没有写博客,今天将前段时间做的Onvif协议在Android上的实现分享给大家. 首先,我们先来了解一下什么是Onvif协议:ONVIF 协议是由Open Network Video Interf ...

  9. SQL语法介绍

    一.Select 查询 语法: mysql> help selectName: 'SELECT'Description:Syntax:SELECT [ALL | DISTINCT | DISTI ...

  10. PAT 甲级 1030 Travel Plan (30 分)（dijstra,较简单,但要注意是从0到n-1）

    1030 Travel Plan (30 分)   A traveler's map gives the distances between cities along the highways, to ...