layui多图片上传
<div>
<button type="button" class="layui-btn" id="mulUpload">图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="mulPreview"></div>
</blockquote>
</div>
<link rel="stylesheet" href="/Public/viewer/viewer.min.css">
<script src="/Public/viewer/viewer.min.js"></script>
<script>
var mul_imgs = ['http://i.srsr.cc/uploads/info/23021810323430.jpg', 'http://i.srsr.cc/uploads/info/23021810324186.jpg', 'http://i.srsr.cc/uploads/info/23021810324430.jpg', 'http://i.srsr.cc/uploads/info/23021810325261.jpg']
function showImgs() {
$('#mulPreview').empty()
mul_imgs.forEach((img, index) => {
$('#mulPreview').append(`
<div style="background:url(${img}) center center no-repeat;">
<img src="${img}" alt="图${index + 1}" />
<i class="layui-icon layui-icon-close-fill" onclick="delImg(${index})"></i>
</div>
`)
$('#mulPreview').viewer('update')
})
}
function delImg(index) {
mul_imgs.splice(index, 1)
showImgs()
}
showImgs()
layui.use(['upload', 'layer', 'form'], function () {
let upload = layui.upload
let layer = layui.layer
let form = layui.form
upload.render({
elem: '#mulUpload'
, url: '__CONTROLLER__/uploadImg' //此处配置你自己的上传接口即可
, multiple: true
, data: { path: '/info/' }
, before: function (obj) {
layer.load()
}
, done: function (res) {
mul_imgs.push(res.data.fullSrc)
console.log('mul_imgs', mul_imgs)
}
, allDone: function (res) {
layer.closeAll('loading')
showImgs()
}
})
})
</script>
<style>
#mulPreview {
display: flex;
flex-wrap: wrap;
}
#mulPreview div {
margin: 0 16px 16px 0;
position: relative;
width: 150px;
height: 150px;
box-shadow: 0 2px 5px 1px #555;
border-radius: 4px;
background-size: cover !important;
}
#mulPreview div img {
width: 100%;
height: 100%;
opacity: 0;
}
#mulPreview div i {
position: absolute;
top: -5px;
right: 5px;
font-size: 30px;
color: red;
opacity: 0.6;
}
</style>
layui多图片上传的更多相关文章
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- .net mvc + layui做图片上传(一)
图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...
- .Net之Layui多图片上传
前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...
- thinkphp5+layui多图片上传
准备资料 下载layui <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- layui的图片上传使用
先上效果图. 在用之前呢,你得先更新最新版的layui版本.经验之谈_(:_」∠)_ 今天在用的时候,实在是碰到太多的坑,本来是拒绝更新到最新版来着. 首先是layui.js和layui.all.js ...
- php+layui实现图片上传与预览
端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- layui 实现图片上传和预览
[学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面 前台实现 <#--图片名--><input id="fileName" type=&qu ...
- layui实现图片上传
页面代码: <style> .uploadImgBtn2{ width: 120px; height: 92px; cursor: pointer; position: relative; ...
- layui框架图片上传至服务器
注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...
- ThinkPHP5+Layui实现图片上传加预览
html代码 <div class="layui-upload"> <button type="button" class="lay ...
随机推荐
- 基于jib-maven-plugin快速构建微服务docker镜像
一.说明 本文介绍基于 Maven 插件 jib-maven-plugin 实现快速构建 Spring Boot 程序镜像,并推送到远程仓库中,且 无需安装 Docker 环境 . Jib 是 Goo ...
- GDOI2021游记
\(\text{Day0}\) 4月9日抵达深圳耀华实验学校 宿舍在迷你公寓,竟然是女生公寓?!! 我想起了 \(b\) 站看到的一个 \(NOI\) 全国总决赛的纪录片(惊人的相似) 不过确实还行 ...
- app启动性能分析
Activity启动流程 名词解释说明: Application OnCreate:加载第三方的sdk Activity OnCreate:加载自身的逻辑:发送远程数据请求:渲染界面List; 响应时 ...
- Mysql去重获取最新的一条数据
Mysql去重获取最新的一条数据 select * from yjzt_kindergartens r where id in (select max(id) from yjzt_kindergart ...
- c++练习272题:金币
*272题 原题传送门:http://oj.tfls.net/p/272 题解:(遍历,60分) #include<bits/stdc++.h>using namespace std;lo ...
- [jQuery]判断页面是否滚动到底部
方法1:判断可见高度+滚动高度是否等于内容高度 但经过测试UC.QQ.华为浏览器,这个方法不生效.(打印查因:可能由于屏幕缩放,可见高度和滚动高度会偏小. $(this).scroll(functio ...
- nginx 配置443 域名
1 申请域名 (公有云)2 下载证书 pem key 并上传服务器指定目录3 公有云上做A记录解析 (解析到代理的nginx)4 nginx配置443模块 配置内容: server { listen ...
- Windchill_二次开发新手入门常用的API
Windchill_二次开发新手入门常用的API 1.根据零件名称/编码 得到该零件 wt.clients.prodmgmt.WTPartHelper.findPartByName(name) ; ...
- mysql拼接多条字段
转 未合并情况 SELECTa.id,b.name AS "role"FROM sys_user aINNER JOIN sys_user_role c ON a.id=c.use ...
- Appium 入门
Appium安装总体需要以下几个步骤: 安装JDK 官网www.oracle.com去下载安装,尽量下载JDK7及以上的版本.然后去设置环境变量: 在系统变量下新建变量JAVA_HOME变量值指向JD ...