layui文件上传
//前端代码
<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>
//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();
});
//tp控制器方法
// 图片上传
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);
}
layui文件上传的更多相关文章
- 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. ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- layui 批量上传文件 + 后台 用servlet3.0接收【我】
前台代码: [主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html] <!DOCTYPE html> <html> ...
随机推荐
- CAP 6.2 版本发布通告
前言 今天,我们很高兴宣布 CAP 发布 6.2 版本正式版,在这个版本中我们主要做了一些功能优化,以及针对目前已经发现的几个 BUG 进行了修复了. 那么,接下来我们具体看一下吧. 总览 可能有些人 ...
- KeeWiDB:兼容Redis协议,领跑NoSQL
如果现在的我们离开了互联网,生活会是什么样子? 互联网++++,已经深刻渗透到人们的生活中. 不知道大家有没有想过?每一个互联网+结合的背后都是海量的存储需求.你查看的每一个商品.组建的每一个战队.阅 ...
- 【项目实战】自备相机+IMU跑通Vins-Mono记录
前言 初次接触SLAM,公司要求用自己的设备来跑通vinsmono这个程序,虽然已经跑通了别人的数据包,但是真正自己上手来运行这个程序,发现真的是困难重重,特意在此记载下来整个过程,以供大家参考. 我 ...
- 第一个Django应用 - 第四部分:表单和类视图
一.表单form 为了接收用户的投票选择,我们需要在前端页面显示一个投票界面.让我们重写先前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...
- Elasticsearch Top10 监控指标
文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247484441&idx=1&sn=8292f50 ...
- 【Linux】指令学习
Linux学习记录 生命不息,写作不止 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! 1.虚拟机网卡配置 服务器重启完成之后,我们可以通过linux的指令 ip addr ...
- Redis学习(1)---Redis概述
什么是NoSQL 概述 NoSQL:Not Only SQL,意思不仅仅是SQL,它是属于非关系型数据库.那什么是关系型数据库?数据结构是一种有行有列的数据库. NoSQL数据库是为了解决高并发.高可 ...
- 从源码分析 MGR 的新主选举算法
MGR 的新主选举算法,在节点版本一致的情况下,其实也挺简单的. 首先比较权重,权重越高,选为新主的优先级越高. 如果权重一致,则会进一步比较节点的 server_uuid.server_uuid 越 ...
- spark之交集并集差集拉链
spark之交集并集差集拉链 def main(args: Array[String]): Unit = { val sparkConf = new SparkConf().setMaster(&qu ...
- 后端框架的学习----mybatis框架(8、lombok)
8.lombok #测试环境搭建 1.导入lombok 2.新建实体类Teacher,Student 3.建立mapper接口 4.建立mapper.xml文件 5.在核心配置文件中绑定注册mappe ...