<!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. Jetson Nano系列教程0：初识Jetson Nano

    关于Jetson Nano Developer Kit Jetson nano搭载四核Cortex-A57 MPCore 处理器,采用128 核 Maxwell™  GPU.支持JetPack SDK ...

  2. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  3. Python-字符串str和json格式的转换

    str转json str转换为json格式,前提一定需要保证这个str的格式和json是一致的,即左边最外层是大括号,右边的最外层是大括号.如果不一致,推荐用正则进行拆分至和json格式一致1. 通过 ...

  4. php开发面试题---lavarel和tp的区别是什么（呕心整理）

    php开发面试题---lavarel和tp的区别是什么(呕心整理) 一.总结 一句话总结: 反思的回顾非常有用,因为决定了我的方向和技巧 以战养己,这是非常非常好的方式 主要从大小.功能.安全性.操作 ...

  5. thinkphp 连接多个数据库

    config配置文件 //数据库配置信息 'DB_CONFIG' => array( 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'loc ...

  6. 5、java操作xml，dom4j

    . 1.首先在项目路径下引入dom4j-1.6.1.jar和jaxen-1.1-beta-6.jar包,jaxp方式解析xml文件 <?xml version="1.0" e ...

  7. 微信小程序，获取二维码

    微信小程序,获取二维码 找到一篇很实用的博客,他已经写得很详细了,自己也懒得写,亲测有效 参考网址

  8. 用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 使用 Bootstrap 编写 Jinja 模板文件 继承一 ...

  9. js添加onclick中自定义方法

    最近写一个插件的时候遇到了这么一个问题. 插件的要求是,仅仅通过一行js代码,就需要生成相应的页面,不能改变源文件的代码 生成页面还好说,但是有一个问题就是,生成的页面中是有一个按钮的.按钮也是可以添 ...

  10. 小米手机 - Charles无法安装证书 因为无法读取证书

    1.不要使用小米原装的浏览器安装证书 2.使用第三方浏览器安装,如我使用的是UC浏览器 3.使用第三方浏览器安装的证书格式是".pem"格式问卷 4.将这个文件放入小米的downl ...