效果展示:

1.html部分:

注:<input> 作为隐藏域,用于保存多图上传的资源数组,方便后期进行 form 表单的提交

<input type="hidden" name="imgs" class="multiple_show_img" value=""> 
<div class="layui-upload">
<button type="button" class="layui-btn" id="multiple_img_upload">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览:
<div class="layui-upload-list" id="div-slide_show"></div>
</blockquote>
</div>

2.js部分:
<script>
var multiple_images = [];

//单击图片删除图片 【注册全局函数】
function delMultipleImgs(this_img){
//获取下标
var subscript=$("#div-slide_show img").index(this_img);
//删除图片
this_img.remove();
//删除数组
multiple_images.splice(subscript, 1);
//重新排序
multiple_images.sort();
$('.multiple_show_img').val(multiple_images);
//返回
return ;
}

layui.use([ 'upload'], function () {
       
var upload = layui.upload;
//多图片上传
upload.render({
elem: '#multiple_img_upload'
,url: "/index.php/admin/upload"
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#div-slide_show').append('<img src="'+ result +'" alt="'+ file.name +'" title="点击删除" class="layui-upload-img" style="width: 100px;height: 100px;" onclick="delMultipleImgs(this)">&nbsp;')
});
}
,done: function(res){
//如果上传成功
if (res.code == 0) {
//追加图片成功追加文件名至图片容器
multiple_images.push(res.data.src);
$('.multiple_show_img').val(multiple_images);
}else {
//提示信息
layer.msg(res.message);
}
}
});

});
</script>

3.PHP后端上传
public function upload()
{
$file = request()->file('file');
$info = $file->validate(['size'=>3145728])->move( '../public/uploads');
if($info){
$msg=['code'=>0,'msg'=>'上传成功','data'=>['src'=>'/uploads/'.str_replace('\\', '/', $info->getSaveName())]];
}else{
$msg=['code'=>1,'msg'=>$file->getError()];
}
return $msg;
}

原文连接:https://blog.csdn.net/u011415782/article/details/88695219(感谢分享)
 

layui中的多图上传的更多相关文章

  1. php结合layui前端实现 多图上传

    前端html代码 <div class="layui-upload"> <button type="button" class="l ...

  2. ueditor百度编辑器中,多图上传后,图片顺序乱掉的处理方法

    上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.pus ...

  3. [PHP] layui实现多图上传,图片自由排序,自由删除

    实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...

  4. layui多图上传实现删除功能

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...

  5. layui多图上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  7. thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

  8. UEditor中多图上传的bug

    多图上传 预览:支持浏览器版本  IE8以上 在线管理:由于存在bug,显示不了 ueditor-1.1.1.jar解压后找到FileManager 1.修改com.baidu.ueditor.hun ...

  9. TP5.0中多图上传文件名重复问题

    最近在做项目的时候出现了一个问题,这里记录一下: 问题: 使用TP5.0框架自带的文件上传方法后,发现多图上传可能会出现文件名重复的问题. 问题代码: 找到TP5框架上传文件命名方法,/thinkph ...

随机推荐

  1. 代码审查:从 ArrayList 说线程安全

    本文从代码审查过程中发现的一个 ArrayList 相关的「线程安全」问题出发,来剖析和理解线程安全. 案例分析 前两天在代码 Review 的过程中,看到有小伙伴用了类似以下的写法: List< ...

  2. JS逆向-抠代码的第二天【手把手学会抠代码】

    今天的学习项目:沃支付:https://epay.10010.com/auth/login 清空浏览器缓存后,打开网页,输入手机号,密码222222,按照网站要求填入验证码(sorry,我没有账号密码 ...

  3. WorkSkill整理之 java用Scanner 类输入数组并打印

    输入不确定长度的数组 import java.util.*; public static void main(String[] args){ System.out.println("请输入一 ...

  4. javascript中的Strict模式

    目录 简介 使用Strict mode strict mode的新特性 强制抛出异常 简化变量的使用 简化arguments 让javascript变得更加安全 保留关键字和function的位置 总 ...

  5. C# 8 中的异步迭代器 IAsyncEnumerable<T> 解析

    异步编程已经流行很多年了,.NET 引入的 async 和 await 关键词让异步编程更具有可读性,但有一个遗憾,在 C# 8 之前都不能使用异步的方式处理数据流,直到 C# 8 引入的 IAsyn ...

  6. PTA 统计二叉树度为2的结点个数

    6-4 统计二叉树度为2的结点个数 (11 分)   本题要求实现一个函数,可统计二叉树中度为2的结点个数. 函数接口定义: int NodeCount ( BiTree T); T是二叉树树根指针, ...

  7. 攻防世界 reverse 进阶 -gametime

    19.gametime csaw-ctf-2016-quals 这是一个小游戏,挺有意思的 's'-->' '    'x'-->'x'   'm'-->'m' 观察流程,发现检验函 ...

  8. CI/CD版本回滚Jenkins解决方案

    一.创建项目 填写项目名,关系到项目路径对应请谨慎命名 二.项目配置 1.配置字符串参数和选项参数 2.代码仓库配置 3.构建环境 4.构筑脚本配置 5.点击左下方的保存或者应用 三.使用方法 1.发 ...

  9. 机器学习--Micro Average,Macro Average, Weighted Average

    根据前面几篇文章我们可以知道,当我们为模型泛化性能选择评估指标时,要根据问题本身以及数据集等因素来做选择.本篇博客主要是解释Micro Average,Macro Average,Weighted A ...

  10. matlab mashgrid 函数

    meshgrid 有三种语法,用来生成三维网格矩阵或二维网格矩阵 [X,Y] = meshgrid(x,y) , x和y 都是一维数组,如x=[1:3]; y= [4:5]; 则生成的 X 和 Y 都 ...