<!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中SendMessage使用说明

    SendMessage基础知识 函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.而函数PostMessage不同,将一个消息寄送到一个线 ...

  2. Linux内核学习--写一个c程序，并在内核中编译，运行

    20140506 今天开始学习伟大的开源代表作:Linux内核.之前的工作流于几个简单命令的应用,因着对Android操作系统的情愫,“忍不住”跟随陈利君老师的步伐,开启OS内核之旅.学习路径之一是直 ...

  3. percona-toolkit工具包的安装和初步使用

    percona-toolkit工具包的安装和初步使用 原文地址:http://blog.csdn.net/yumushui/article/details/42919601 一.percona-too ...

  4. SSH known_hosts / authorized_keys

    参考: http://blog.sina.com.cn/s/blog_148a693f10102vj8m.html 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用 ...

  5. 55、saleforce 学习笔记二

    String goodsName = 'abcd1123汉字显示';//测试文本 System.debug('简化后的字符串名称为:'+goodsName.abbreviate(5)); //返回简化 ...

  6. main()和代码块

    main方法 * main()方法的使用说明 * main方法是程序的主入口(一个主程序 先从main开始进行执行) * * * main方法也可以是一个普通的静态方法 代码块 代码块也是类的成员变量 ...

  7. B - Heshen's Account Book HihoCoder - 1871

    题目链接:https://hihocoder.com/problemset/problem/1871 思路:满满的细节满满的坑,尤其是 123df123 居然也要算成123123 的时候真是惊呆了,我 ...

  8. nginx支持http2协议

    1.http2协议 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量.从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响.所有HTTP 首部.值,以及它们的使用场景都 ...

  9. sleep()方法和wait()方法的区别? sleep()方法和yield()方法的区别?

    sleep()方法和wait()方法的区别? sleep方法是Thread的静态方法,wait方法是Object类的普通方法 sleep方法不释放同步锁,wait方法释放同步锁(执行notify方法唤 ...

  10. Activiti获取当前活动（任务）的出口（动态生成提交按钮）

    1.设置出口变量 当一个任务有一个或多个出口时,可以在出口连线出设置判断条件如图: 2.根据任务Id获取出口集合 public List<String> getOutGoingTransN ...