<!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. centos7 安装VMware tools 出现The path "" is not a valid path to the 3.10.0-514.el7.x86_64 kernel headers

    执行:yum install "kernel-devel-uname-r == $(uname -r)"

  2. taomcat中catalina.out文件

    项目中发现在linux环境下布署的tomcat所占用的磁盘空间越来越大,是catalina.out 文件,每天几乎是2个G,发现可能会影响到tomcat服务(没确定)正常访问.文件这么大,其实已经无法 ...

  3. 经典的MySQL Duplicate entry报错注入

    SQL注射取数据的方式有多种: 利用union select查询直接在页面上返回数据,这种最为常见,一个前提是攻击者能够构造闭合的查询. Oracle中利用监听UTL_HTTP.request发起的H ...

  4. 爬取猎聘大数据岗位相关信息--Python

    猎聘网站搜索大数据关键字,只能显示100页,爬取这一百页的相关信息,以便做分析. __author__ = 'Fred Zhao' import requests from bs4 import Be ...

  5. Jmeter 5.1参数化csv引入文件

    Jmeter 5.1参数化csv引入文件 1.引用外部参数文件.新建json.txt文本输入需要的数据,我写了两条数据. 2.添加CSV数据文件设置,输入文件名.变量名.是否读取首行 报文中引用参数, ...

  6. Java 实例 - 状态监测

    以下实例演示了如何通过继承 Thread 类并使用 currentThread.getName() 方法来监测线程的状态: Main.java 文件 1 2 3 4 5 6 7 8 9 10 11 1 ...

  7. vue的品牌添加与筛选的功能集合

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

  8. editplus 正则表达式 分组替换

    editplus :zz正则表达式替换 /开头的api+换行符 替换为   /开头的api+空格 \1后有空格 editplus :zz正则表达式替换 行首两个数字+换行符 替换为  行首两个数字+空 ...

  9. 函数高阶（函数，改变函数this指向，高阶函数，闭包，递归）

    一.函数的定义方式 1.函数声明方式 function  关键字(命名函数) 2.函数表达式(匿名函数) 3.new  Function( ) var  fn = new  Function(‘参数1 ...

  10. strxfrm - 转换字符串

    总览 (SYNOPSIS) #include <string.h> size_t strxfrm(char *dest, const char *src, size_t n); 描述 (D ...