<!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. Delphi RegisterHotKey 设置系统热键

    Symbolic constant name Value (hexadecimal) Keyboard (or mouse) equivalent VK_LBUTTON 01 Left mouse b ...

  2. 使用ui给定的字体，通过css引入字体库

    @font-face { font-family: 'LCDMonoNormal'; src: url('../../assets/fonts/LCDM2N__.eot'); src: url('.. ...

  3. gokit 统计分析 M2M接入服务 OTA固件升级 硬件社交化

    统计分析 M2M接入服务  OTA固件升级 硬件社交化 统计分析 为智能硬件定制的统计分析服务.只需添加入一行代码的集成工作,多维度的设备使用和用户行为数据就能自动统计出来. 演示 特色一:设备上线情 ...

  4. 89、tensorflow使用GPU并行计算

    ''' Created on May 25, 2017 @author: p0079482 ''' # 分布式深度学习模型训练模式 # 在一台机器的多个GPU上并行训练深度学习模型 from date ...

  5. GDB can't continue if no space left

    [root@premta ~]# df -hFilesystem Size Used Avail Use% Mounted on/dev/sda3 36G 36G 0 100% /tmpfs 1.5G ...

  6. LOJ #103. 子串查找 (Hash)

    题意 给定两个字符串 \(A\) 和 \(B\),求 \(B\) 在 \(A\) 中的出现次数. 思路 这是一道 \(KMP\) 的模板题. 不过 \(Hash\) 是个好东西,可以用 \(Hash\ ...

  7. C/S and B/S

    C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...

  8. JPA的入门CRUD

    主要目的: 操作实体类就相当于操作数据库表 建立两个映射关系: 实体类和表的映射关系 实体类中的属性和表中字段的映射关系 不在关注sql语句 常见的orm框架:Mybatis(ibatis).Hibe ...

  9. 开启MySQL远程访问权限 允许远程连接（阿里云服务器）、linux关闭防火墙

    1.登陆mysql:mysql -u root -p mysql> show databases; +--------------------+ | Database | +---------- ...

  10. 20140922 tcpip3次握手 分段 分页 spooling 位示图

    tcpip3次握手 http://www.cnblogs.com/CBDoctor/archive/2012/10/17/2727073.html   操作系统:http://blog.csdn.ne ...