layui文件上传+ThinkPHP
1.前端html代码
<div class="layui-form-item">
<label class="layui-form-label">修改头像</label>
<div class="layui-input-inline uploadHeadImage">
<div class="layui-upload-drag" id="headImg">
<i class="layui-icon"></i>
<p>点击上传图片,或将图片拖拽到此处</p>
</div>
</div>
<div class="layui-input-inline">
<div class="layui-upload-list">
<img class="layui-upload-img headImage" src="" id="demo1">
<p id="demoText"></p>
</div>
</div>
</div>
2.前端js代码
<script>layui.use(['form', 'layer','upload',"element"],
function() {
$ = layui.jquery;
var form = layui.form,
upload = layui.upload,
layer = layui.layer;
//拖拽上传
var uploadInst = upload.render({
elem: '#headImg'
, url: '{:url("uploadImg")}'
, size: 500
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图片链接(base64)
});
}
, done: function (res) {
console.log(res);
//如果上传失败
if (res.code > 0) {
return layer.msg('上传失败');
}
var demoText = $('#demoText');
// demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
$("#imagepath").val(res.image)
layer.msg("上传成功")
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
element.init();
});
3.后台php代码
// 图片上传
public function uploadImg(){
// 上传代码
$file = request()->file('file');
// 上传到本地服务器
$savename = \think\facade\Filesystem::disk('public')->putFile( 'goods', $file);
$data['image'] = $savename;
$data['code'] = 0;
return json($data);
}
4.图片存放路径修改地址

layui文件上传+ThinkPHP的更多相关文章
- Layui文件上传样式在ng-dialog不显示的问题处理
1.项目业务改动,在一个弹窗页面加图片上传. 2.页面使用angular框架,图片上传使用layui的文件上传组件. js: layui.upload({ url: '/test/upload.jso ...
- layui文件上传进度条(模拟)
1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.co ...
- layui文件上传组件“请求上传接口出现异常”问题解决方案
这是一个悲伤的故事,以前开发项目用过很多次这个组件,这次使用了Token,于是报了一些莫名其妙的错误,来复盘一下,警示自己! 刚开始接触layui的同学们肯定经常会看到这个错误 下面我们对这个异常的处 ...
- layui 文件上传加进度条
1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...
- layui文件上传中如何先判断后再弹出文件选择框
前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...
- Layui 文件上传 附带data数据
配置项中增加参数: , data: { CaseId: function () { return $("#CaseId option:selected").val(); }, Ca ...
- 利用layui前端框架实现对不同文件夹的多文件上传
利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...
- 使用java的MultipartFile实现layui官网文件上传实现全部示例,java文件上传
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...
- THINKPHP源码学习--------文件上传类
TP图片上传类的理解 在做自己项目上传图片的时候一直都有用到TP的上传图片类,所以要进入源码探索一下. 文件目录:./THinkPHP/Library/Think/Upload.class.php n ...
- Thinkphp 验证码、文件上传
一.验证码 验证码参数 例题:登录时验证下验证码 LoginController.class.php <?php namespace Home\Controller; use Think\Con ...
随机推荐
- [Python]-pdb模块-单步调试
使用pdb模块辅助python调试. import pdb 断点模式 在需要调试的语句前设置断点,加入这行代码: pdb.set_trace() 程序运行到这就会进入断点调试模式. 输入 作用 n 运 ...
- 4.第三篇 PKI基础概念、cfssl工具介绍及kubernetes中证书
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483787&idx=1&sn=08dd3404 ...
- MySQL配置不当导致Sonarqube出错的一次经历:Packet for query is too large (16990374 > 13421568)
公司里部署了Jenkins + Sonarqube对项目代码进行构建和代码质量扫描. 某个大型项目报告项目构建失败.进jenkins看,该项目构建日志中的报错信息是这样的: 通过错误堆栈中的信息可以判 ...
- STM32F0单片机基于Hal库温控智能风扇
一.项目概述 设计采用STM32F0系列单片机做主控芯片,通过DHT11采集温湿度,将温度显示在OLED 屏幕上.根据温度的不同,利用STM32对风扇进行调速,总体硬件设计如下图所示 1.效果展示 2 ...
- PAT (Basic Level) Practice 1004 成绩排名 分数 20
读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用例,格式为 第 1 行:正整数 n 第 2 行:第 1 个学生的 ...
- Ventoy制作PE启动盘
前言 不怎么回事,只要是学计算机的都被非计算机专业的认为是会修电脑.常常抛来一个请求:咦,你不是学计算机的吗,帮我重装系统. 在日常生活中准备个有PE系统的U盘,以备不时之需. 常见的PE启动盘的制作 ...
- 微软出品自动化神器【Playwright+Java】系列(五) 之 常见点击事件操作
写在前面 明天就是周五了,这周有那么一两天心情特别不好,真的是做什么都没兴致,所以导致整个人都很丧,什么都不想做. 本打算周一就更新这篇文章的,但由于公司一直加班,每天到家很晚,都是挤时间去学,理解后 ...
- ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)
ASCII(American Standard Code for Information Interchange,美国标准信息交换代码) ASCII简介 ASCII(American Standard ...
- java集合框架复习----(3)Set
文章目录 四.set集合 1.hashSet[重点] 2.TreeSet 四.set集合 无序.无下标.元素不可重复 1.hashSet[重点] == 数组+链表+红黑树== 基于hashcode计算 ...
- Vulnhub 靶机 pwnlab_init 渗透——详细教程
1. 下载 pwnlab_ini 靶机的 .ova 文件并导入 VMware: pwnlab下载地址:PwnLab: init ~ VulnHub 导入VMware时遇到VMware上虚机太多,无法确 ...