Thinkphp5+Layui上传图片
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上传的时候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上传图片的更多相关文章
- Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径
Layui 上传图片到磁盘上 + Tomcat 配置虚拟路径 Tomcat 配置虚拟路径 找到 eclipse 中 tomcat 下面的 server.xml 文件,在 Host 标签里面添加 < ...
- thinkphp结合layui上传图片
简单示例: <script type="text/javascript"> layui.use(['form', 'layedit','element', 'layda ...
- layui 上传图片 实现过程
layui.user一个页面只能有一个,写多了会实现js效果 上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件 ...
- Layui上传图片 带接口
layui.use('upload', function () { var upload = layui.upload; upload.render({ elem: '#LAY_avatarUploa ...
- 上传头像,layui上传图片
layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用 先看一下前台界面,这里是用到的上传头像 先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...
- layui——上传图片,并实现放大预览
一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...
- Thinkphp5封装上传图片
<?php namespace app\api\controller; use think\Controller; use think\Db; class Plus extends Base{ ...
- thinkphp5+layui多图片上传
准备资料 下载layui <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。
公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...
随机推荐
- 微信小程序之简单记账本开发记录(三)
昨天已经编辑了主界面,在wxml文件中设置好跳转链接之后,就可以进行下一步的开发了 在pages中建立一个新的页面文件夹作为之后的支出页面 编辑后台,今天先搭建大致界面
- 页面ajax请求传参及java后端数据接收
js ajax请求传参及java后端数据接收 Controller: package com.ysl.PassingParameters.controller; import java.util.Li ...
- ICEM-圆环孔
原视频下载地址:https://yunpan.cn/cSKwAIRmFLGe5 访问密码 49c5
- 快速上手系列-C语言之指针篇(一)
快速上手系列-C语言之指针篇(一) 浊酒敬风尘 发布时间:18-06-2108:29 指针的灵活运用使得c语言更加强大,指针是C语言中十分重要的部分,可以说指针是C语言的灵魂.当然指针不是万能的,但没 ...
- 《梁宁·产品思维30讲》课程学习笔记(内含全套音频+ppt资料
科技进步.产品迭代.公司演化.组织变迁……不变的是用户的情绪和人性. 那些信奉“用户驱动”的人,从普通人变成了行业大佬,建立了自己的世界.乔布斯.马化腾.马云.雷军.张小龙.周鸿祎.傅盛……这些改变世 ...
- 安装python3的详细教程
环境:CentOS 7 1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-dev ...
- PHP学习之观察者模式
<?php //观察者模式涉及到两个类 //男人类 和女朋友类 //男人类对象小明, 女朋友类对象小花.小丽 class Man { //用了存放观察者 protected $observers ...
- JMeter-jp@gc - PerfMon Metrics Collector-CPU监控工具的配置及使用(win版本)
服务器端放这个 如果端口号被占用,默认报这个错: 如果默认的4444端口被占用的修改: C:\Users\Administrator>CD E:\E:\apache-jmeter-4.0\Ser ...
- C#winform和百度API互动-----之JS读取中C#中的函数
例子1 线上JS var getcpylocation =window.external.getlocation(); map.centerAndZoom(getcpylocation,12); C# ...
- python 学生表
1,主页面函数(01-mainpage.py) import json import file_manager import student_system ''' ''' # 全局变量 file_na ...