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});
              }
            }
          });
    
        });  

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

    ——现在的努力,只为小时候吹过的牛逼! ——
  • 相关阅读:
    【GoLand】分享项目到Github平台
    【Git】实用教程
    【Go】Mac系统下安装GoLand 及 环境配置
    CF 901C Bipartite Segments
    CF 811E Vladik and Entertaining Flags
    Luogu P6300 悔改
    Luogu P3943 星空
    CSP2020 | T4
    NOIP2017 | D2T3
    Luogu P6852 Mex
  • 原文地址:https://www.cnblogs.com/zxf100/p/14704544.html
Copyright © 2011-2022 走看看