<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>多图上传</title>

    <link rel="stylesheet" href="__PUBLIC_ADMIN/layui/src/css/layui.css">

    <script src="__PUBLIC_ADMIN/layui/src/layui.js"></script>

       <script src="__PUBLIC_ADMIN/js/jquery-3.3.1.js"></script>

  <style>

.layui-upload-img { width: 90px; height: 90px; margin: 0; }

.pic-more { width:100%; left; margin: 10px 0px 0px 0px;}

.pic-more li { width:90px; float: left; margin-right: 5px;}

.pic-more li .layui-input { display: initial; }

.pic-more li a { position: absolute; top: 0; display: block; }

.pic-more li a i { font-size: 24px; background-color: #008800; }

#slide-pc-priview .item_img img{ width: 90px; height: 90px;}

#slide-pc-priview li{position: relative;}

#slide-pc-priview li .operate{ color: #000; display: none;}

#slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}

#slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}

#slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}

#slide-pc-priview li:hover .operate{ display: block;}

</style>

</head>

<body>

<form method="post"  enctype="multipart/form-data">

   <div class="layui-form-item" id="pics">

  <div class="layui-form-label">相册图集</div>

  <div class="layui-input-block" style="width: 70%;">

    <div class="layui-upload">

      <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>

      <div class="pic-more">

        <ul class="pic-more-upload-list" id="slide-pc-priview">

        </ul>

      </div>

      <button type="submit">提交</button>

    </div>

  </div>

</div>

  </form>

<script>

         layui.use('upload', function(){

           var $ = layui.jquery;

           var upload = layui.upload;

           upload.render({

             elem: '#slide-pc',

             url: "{:url('admin/post_image/upload')}",

                   size: 500,

                   exts: 'jpg|png|jpeg',

                   multiple: true,

                   before: function(obj) {

                   layer.msg('图片上传中...', {

                     icon: 16,

                     shade: 0,

                     time: 5000

                   })

           },

           done: function(res) {

             layer.close(layer.msg());//关闭上传提示窗口

             if(res.status == 0) {

               return layer.msg(res.message);

             }

             //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');

             $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i>《<i class="toright layui-icon">》</i><i  class="close layui-icon"><img style="height: 32px;width: 32px;" src="__PUBLIC_ADMIN/del.png"></i></div><img src="__STATIC__/../' + res.filepath + '" class="img" ><input type="hidden" name="pc_src[]" value="' + res.filepath + '" /></li>');

           }

         });

         });

         //点击多图上传的X,删除当前的图片

         $("body").on("click",".close",function(){

           $(this).closest("li").remove();

         });

         //多图上传点击<>左右移动图片

         $("body").on("click",".pic-more ul li .toleft",function(){

           var li_index=$(this).closest("li").index();

           if(li_index>=1){

             $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));

           }

         });

         $("body").on("click",".pic-more ul li .toright",function(){

           var li_index=$(this).closest("li").index();

           $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));

         });

</script>

</body>

</html>

　　

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

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

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

  2. thinkphp+layui多图上传（1）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

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

  3. layui多图上传加隐藏域

    我的情况是,通过layui上传图片调用后端,后端将图片上传后返回图片路径,上传成功后将图片在页面显示出来(避免用户网速不稳定,图片其实还没上传成功就进行下一步操作),然后同步每个图片增加隐藏域,最终表 ...

  4. .Net之Layui多图片上传

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

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

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

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

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

  7. layui中的多图上传

    效果展示: 1.html部分: 注:<input> 作为隐藏域,用于保存多图上传的资源数组,方便后期进行 form 表单的提交 <input type="hidden&qu ...

  8. .net mvc + layui做图片上传（二）—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  9. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

随机推荐

  1. BN和正则化一起使用的后果

    就是因为 batch norm 过后, weight 影响没那么重了,所以 l2 weight decay 的效果就不明显了. 证明了L2正则化与归一化相结合时没有正则化效应.相反,正则化会影响权重的 ...

  2. js事件---同一个事件实现全选与反选功能

    背景: 点击头部按钮,实现全选与反选功能 1.绑定事件,把当前勾选状态传递给方法 $event <el-checkbox v-model="ModelCheckAll" cl ...

  3. linux教程及常用命令手册

    Linux 教程 Linux 教程.Linux 简介.Linux 安装.Linux 系统启动过程.Linux 系统目录结构.Linux 忘记密码解决方法.Linux 远程登录.Linux 文件基本属性 ...

  4. 《ArcGIS Runtime SDK for .NET开发笔记》--在线编辑

    介绍 ArcGIS可以发布具有编辑功能的Feature Service.利用Feature Service我们可以实现对数据的在线编辑. 数据制作参考: https://server.arcgis.c ...

  5. 编译安装Python3.4, pip安装, pypi是pip的源，修改为国内的pypi源

    Linux 下编译安装 Python 3.4 更新于 2014-09-24 02:01:05 UEANER 系统环境: CentOS 6.5 x86_64 / Fedora 20 x86_64 安装相 ...

  6. CentOS系统更换软件安装源yum

    第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  7. 【C++第一个Demo】---控制台RPG游戏2【通用宏、背包类】

    [通用 ]--一些游戏中常用的宏.函数和枚举 #ifndef _MARCO_H_ #define _MARCO_H_ //------------------------常用系统库---------- ...

  8. strtotime 获取当月最后一天的日期

    strtotime('last day of this month', $timestamp);

  9. 程序性能优化之APK大小优化（六）上

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本篇文章将继续从APK瘦身来介绍APK大小优化:文章主要内容从理 ...

  10. 20-python基础-python3-reversed()函数

    描述 reversed 函数返回一个反转的迭代器. 语法 reversed(seq) 参数 seq -- 要转换的序列,可以是 tuple, string, list 或 range. # 字符串 s ...