zoukankan      html  css  js  c++  java
  • layui实现多图上传,支持拖拽上传

    示例:支持多图上传,支持拖拽上传,下方有文件上传信息提示

    html代码:

    <div class="layui-upload">
          <div class="layui-upload-drag" id="test2">
                 <i class="layui-icon"></i>
                 <p>点击多图上传,或将文件拖拽到此处</p>
          </div>
                      
          <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图:
                <div class="layui-upload-list" id="demo2"></div>
          </blockquote>
        <p id="tipTxt"></p>
    </div>

    JS代码:

    layui.use(['element', 'layer','form','upload'], function(){
            var $ = layui.jquery
            ,layer = layui.layer
            ,element = layui.element
            ,upload = layui.upload
            ,form = layui.from;
            //多图片上传
          upload.render({
            elem: '#test2'
            ,url: 'xxx.xxx' //改成您自己的上传接口
            ,multiple: true
            ,accept:'images'
            ,exts:'jpg|jpeg|png|gjf|webp|bmp|tif'
            ,drag:true
            ,allDone: function(obj){ 
              var txt = "共选择了 【"+obj.total+"】 张图片,其中,上传成功 【"+obj.successful+"】 张,失败 <span style='color:red'>【"+obj.aborted+"】 </span>张";
              $("#tipTxt").html(txt);
            }
            ,before: function(obj){
              //预读本地文件示例,不支持ie8
              obj.preview(function(index, file, result){
                $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
              });
              
            }
            ,done: function(res){
              $('#demoText').html('');
              //上传完毕
              if (res.code == 200) {
                layer.msg('上传完毕', {icon: 1});
              }
            }
          });
    
        });  

    后端接口就是上传图片的接口

    ——现在的努力,只为小时候吹过的牛逼! ——
  • 相关阅读:
    1230: [Usaco2008 Nov]lites 开关灯
    1821: [JSOI2010]Group 部落划分 Group
    1819: [JSOI]Word Query电子字典
    1820: [JSOI2010]Express Service 快递服务
    3038: 上帝造题的七分钟2
    1854: [Scoi2010]游戏
    Codevs3278[NOIP2013]货车运输
    关于使用lazytag的线段树两种查询方式的比较研究
    算法模板——splay区间反转 1
    3223: Tyvj 1729 文艺平衡树
  • 原文地址:https://www.cnblogs.com/zxf100/p/14704544.html
Copyright © 2011-2022 走看看