thinkphp8结合layui2.9 图片上传验证

<?php
declare (strict_types = 1);namespace app\index\validate;use think\Validate;class Upload extends Validate
{/*** 定义验证规则* 格式:'字段名' =>  ['规则1','规则2'...]** @var array*/protected $rule = ['image' => 'fileExt:jpg,png|fileSize:204800|fileMime:image/jpeg,image/png', // 文件扩展名限制为jpg, png;文件大小限制为200K;文件MIME类型限制为image/jpeg, image/png];/*** 定义错误信息* 格式:'字段名.规则名' =>  '错误信息'** @var array*/protected $message = ['image.fileExt' => '图片格式必须为jpg或png','image.fileSize' => '图片大小不能超过200K',];
}

在index应用下,创建了验证器;

<?php
declare (strict_types = 1);namespace app\index\controller;use think\Request;
use app\index\validate\Upload as ValidateUpload;
use think\facade\Filesystem as Fs;
class Upload
{public function index(){return view('/upload');}public function upload(Request $request){$file = $request->file('file');$validate = new ValidateUpload();if (!$validate->check(['image' => $file])) {return json(['code' => 1, 'msg' => $validate->getError()]);}$savename = Fs::disk('public')->putFile('', $file);// 确保路径使用正斜杠$savename = str_replace('\\', '/', $savename);return json(['code' => 0, 'msg' => '上传成功', 'data' => ['url' => '/storage/' . $savename]]);}
}

index应用下,创建了index控制器,upload方法处理了来自前端的ajax上传;

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag"><i class="layui-icon layui-icon-upload"></i> <div>点击上传,或将文件拖拽到此处</div><div class="layui-hide" id="ID-upload-demo-preview"><hr> <img src="" title="上传成功后渲染" style="max-width: 100%"></div>
</div><!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.14/dist/layui.js"></script>
<script>
layui.use(function(){var upload = layui.upload;var $ = layui.$;// 渲染upload.render({elem: '#ID-upload-demo-drag',url: '/index/upload/upload/', // 实际使用时改成您自己的上传接口即可。accept: 'images', // 指定允许上传的文件类型exts: 'jpg|png', // 允许上传的文件后缀,不带点,多个用|分割,如果需要所有类型则把整个MIME类型写上,如image/*'done: function(res){if(res.code != 0){return layer.msg(res.msg);} else {layer.msg('上传成功');$('#ID-upload-demo-preview').removeClass('layui-hide').find('img').prop('src', res.data.url);console.log(res);}}});
});
</script></body>
</html>

这是layui上传图片的前端示例代码;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DevExpress WinForms自动表单布局,创建高度可定制用户体验(二)

使用DevExpress WinForms的表单布局组件可以创建高度可定制的应用程序用户体验&#xff0c;从自动安排UI控件到按比例调整大小&#xff0c;DevExpress布局和数据布局控件都可以让您消除与基于像素表单设计相关的麻烦。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&a…

【JavaEE初阶】线程的概念及创建

目录 &#x1f4d5; 前言 &#x1f4d5; 认识线程&#xff08;Thread&#xff09; &#x1f6a9; 概念 &#x1f60a;线程是什么 &#x1f642; 为啥要有线程 &#x1f62d; 进程和线程的区别&#xff08;面试题重点&#xff09; &#x1f92d; Java的线程和操作系统线程…

自学Java第15Day

学习目标&#xff1a;面向对象进阶 学习内容&#xff1a;常用API 学习时间&#xff1a; 3 点-下午 6 点 学习产出&#xff1a; 1.Math 方法名说明public static int abs(int a)获取参数绝对值public static double ceil(double a)向上取整public static double floor(double …

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(八)-无人机探测与避让(DAA)机制

目录 引言 5.6 探测与避让&#xff08;DAA&#xff09;机制 5.6.1 基于PC5的探测与避让&#xff08;DAA&#xff09;机制 引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Airc…

华为AR6300S路由器开启SSH远程登录

登录华为路由器&#xff1a; 使用控制台线连接到路由器的控制台端口或者通过Telnet或Web界面远程登录到设备。进入系统视图&#xff1a; 输入system-view&#xff08;或者简写为sys&#xff09;命令进入系统视图模式&#xff0c;这是配置全局参数的地方。生成RSA密钥对&#x…

2024年7月27日(星期六)骑行小河边村

2024年7月27日 (星期六&#xff09;骑行小河边村&#xff0c;早8:30到9:00&#xff0c;大观公园门口集合&#xff0c;9:00准时出发【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:大观公园门口集合 &#xff0c;家住东&#xff0c;西&#xff0…

【自然语言处理(NLP)】基本概念和应用

自然语言处理&#xff08;NLP&#xff09;&#xff1a;基本概念和应用 目录 引言自然语言处理的基本概念 词法分析句法分析语义分析上下文分析 自然语言处理的关键技术 词嵌入序列到序列模型注意力机制和Transformer预训练语言模型 自然语言处理的应用 文本分类情感分析机器翻…

NodeRed测试modbus RTU或modbus TCP通讯

目录标题 STEP1 添加modbus节点STEP2 查看是否安装成功STEP3 modbusTCP读取写入设置读取设置写入设置 STEP4 读写测试 STEP1 添加modbus节点 节点管理——控制板——安装 找到node-red-contrib-modbus&#xff0c;点击安装 STEP2 查看是否安装成功 安装成功后&#xff0c;左…

30.【C语言】函数系列下

1.嵌套调用 *定义&#xff1a;函数之间的互相调用 *例&#xff1a; int function1(int a, int b) {function2(b);//嵌套函数的调用return a; } //注意&#xff1a;不能将function2定义在function1的里面&#xff0c;这不叫嵌套函数的调用 void function2(int c) {} #include…

linux系统安装python3和pip

一、安装python 1、安装依赖环境 yum install gcc -y yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel yum install zlib zlib-devel openssl -y yum install openssl…

学习记录day16—— 数据结构 双向链表 循环链表

双向链表 1、概念 1&#xff09;就是从任意一个节点既能存储其前驱节点&#xff0c;又能存储后继节点 2)结构体中增加一个指向前驱节点的指针 //定义数据类型 typedef int datatype;//定义节点类型 typedef struct Node {union {int len;datatype data;};struct Node *prio; …

[论文笔记] DCA(Dual Chunk Attention)

DCA&#xff08;Dual Chunk Attention&#xff09;是一种在自然语言处理模型中用来处理长文本的技术。传统的注意力机制&#xff08;Attention&#xff09;在处理长文本时可能会遇到效率和性能瓶颈&#xff0c;因为计算每个单词与其他所有单词之间的关系会随着文本长度的增加而…

Nova Admin - 简洁干净、免费开源的后台管理系统,基于Vue3 / Vite5 / Typescript / Naive UI 等前端开发技术栈

今天看到一款 Vue3 后台管理 admin 系统&#xff0c;研究了一下发现很不错&#xff0c;推荐给大家。 Nova-admin 是一个颜值在线&#xff0c;风格清新、简洁干净后台管理模板&#xff0c;包含了平时常用的管理后台功能页面模板。基础的 UI 组件基于我之前推荐的 naive-ui 开发…

【Golang 面试基础题】每日 5 题(六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

HTML前端 盒模型及常见的布局 流式布局 弹性布局 网格布局

CSDN的文章没有“树状目录管理”&#xff0c;所以我在这里整理几篇相关的博客链接。 操作有些麻烦。 CSS 两种盒模型 box-sizing content-box 和 border-box 流式布局 flow layout 弹性布局 flex layout HTML CSS 网格布局 grid layout HTML CSS

百度,有道,谷歌翻译API

API翻译 百度&#xff0c;有道&#xff0c;谷歌API翻译&#xff08;只针对中英相互翻译&#xff09;,其他语言翻译需要对应from&#xff0c;to的code 百度翻译 package fills.tools.translate; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis…

Win11+Anaconda+VScode:mmpose环境配置与基本使用

MMPose 是一款基于 PyTorch 的姿态分析的开源工具箱,是 OpenMMLab 项目的成员之一。 目录 前言 一、mmpose整体框架 二、依赖与安装 从源码安装(推荐) 作为 Python 包安装 三、验证安装 四、使用mmpose处理数据 总结 前言 官方安装手册:欢迎来到 MMPose 中文文档!…

TMS320F28335多级中断及中断响应过程

DSP28335的中断系统设计为多级中断机制&#xff0c;主要包括外设级中断、PIE级中断和CPU级中断。以下是详细的中断使能及响应过程&#xff1a; 1.外设级中断&#xff1a; 当外设产生中断事件时&#xff0c;对应的中断标志寄存器&#xff08;IF&#xff09;的相应位将被自动置…

ABAP+从SAP发出去的PDF文件在第三方系统出现乱码

这是一个 ABAP转换PDF调用函数CALL FUNCTION CONVERT_OTF的问题记录&#xff0c;关乎字体STSong-Light-ldentity-H 和 STSong-Light的区别 背景&#xff1a; 做了一个增强&#xff0c;是采购订单审批后自动发送采购订单PDF1到企业微信&#xff0c;用户再将企业微信收到的P…

C# 代理模式

栏目总目录 概念 代理模式是一种结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。在代理模式中&#xff0c;我们创建一个具有现有对象&#xff08;称为“真实对象”或“被代理对象”&#xff09;相同功能的代理对象。代理对象可以在客户端和目标对…