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的更多相关文章

  1. Layui文件上传样式在ng-dialog不显示的问题处理

    1.项目业务改动,在一个弹窗页面加图片上传. 2.页面使用angular框架,图片上传使用layui的文件上传组件. js: layui.upload({ url: '/test/upload.jso ...

  2. layui文件上传进度条(模拟)

    1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.co ...

  3. layui文件上传组件“请求上传接口出现异常”问题解决方案

    这是一个悲伤的故事,以前开发项目用过很多次这个组件,这次使用了Token,于是报了一些莫名其妙的错误,来复盘一下,警示自己! 刚开始接触layui的同学们肯定经常会看到这个错误 下面我们对这个异常的处 ...

  4. layui 文件上传加进度条

    1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...

  5. layui文件上传中如何先判断后再弹出文件选择框

    前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...

  6. Layui 文件上传 附带data数据

    配置项中增加参数: , data: { CaseId: function () { return $("#CaseId option:selected").val(); }, Ca ...

  7. 利用layui前端框架实现对不同文件夹的多文件上传

    利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...

  8. 使用java的MultipartFile实现layui官网文件上传实现全部示例,java文件上传

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...

  9. THINKPHP源码学习--------文件上传类

    TP图片上传类的理解 在做自己项目上传图片的时候一直都有用到TP的上传图片类,所以要进入源码探索一下. 文件目录:./THinkPHP/Library/Think/Upload.class.php n ...

  10. Thinkphp 验证码、文件上传

    一.验证码 验证码参数 例题:登录时验证下验证码 LoginController.class.php <?php namespace Home\Controller; use Think\Con ...

随机推荐

  1. 跟羽夏学 Ghidra ——窗口

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...

  2. Netty 学习(四):ChannelHandler 的事件传播和生命周期

    Netty 学习(四):ChannelHandler 的事件传播和生命周期 作者: Grey 原文地址: 博客园:Netty 学习(四):ChannelHandler 的事件传播和生命周期 CSDN: ...

  3. typora收费了,最后一个免费版提供下载

    typora收费了,在这里,博主提供最后一个免费版下载,地址如下,顺便把typora导入和导出word时需要的工具也一同提供.最看不惯免费用着别人的软件,还搞引流的垃圾网站和公众号.地址如下 http ...

  4. K8s 上的分布式存储集群搭建(Rook/ceph)

    转载自:https://mp.weixin.qq.com/s/CdLioTzU4oWI688lqYKXUQ 1 环境准备 1.1 基础环境 3台配置一致的虚拟机 虚拟机配置:4c 8g 虚拟机操作系统 ...

  5. Portainer安装,配置自定义镜像仓库拉取镜像

    Portainer介绍 Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台 ...

  6. MongoDB分片集群-Sharded Cluster

    分片概念 分片(sharding)是一种跨多台机器分布数据的方法, MongoDB使用分片来支持具有非常大的数据集和高吞吐量操作的部署. 换句话说:分片(sharding)是指将数据拆分,将其分散存在 ...

  7. Node.js(六)连接MongoDB进行数据访问

    npm init -y(初始化项目) npm install mongodb --save(引入MongoDB) const { MongoClient } = require("mongo ...

  8. bat批处理命令语法总结

    ::1. 关闭回显表示不显示命令本身只显示输出部分 @echo off ::2. 设置变量注意等号间不能有空格 set num=10 ::3. 使用变量 echo %num% ::4. call 调用 ...

  9. Scanner的用法 从键盘输入

    先导入包 import java.util.Scanner; 后输入 Scanner Sc=new Scanner(System.in); //(Sc可以自定义,无实质意义) int i; i=Sc. ...

  10. Dubbo 03: 直连式 + 接口工程

    进一步改正dubbo框架中简单的直连式的不足 需要用到3个相互独立的maven工程,项目1为maven的java工程作为接口工程,项目2,3为maven的web工程 工程1:o3-link-inter ...