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

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

    ——现在的努力,只为小时候吹过的牛逼! ——
  • 相关阅读:
    c# 类中使用ResolveUrl
    IIS7日志中时间与系统时间不一致的原因
    IIS日志-网站运维的好帮手
    精通 JS正则表达式
    word 标题序号
    rtx 二次开发,查找所有部门
    【云计算】Docker容器时间同步如何配置?
    【云计算】Docker多进程管理方案-cfengine && supervisord
    【Python】装饰器实现日志记录
    【云计算】k8s相关资料
  • 原文地址:https://www.cnblogs.com/zxf100/p/14704544.html
Copyright © 2020-2023  润新知