2021-09-30 工作记录--LayUI-多图上传时，通过进度条来展示上传进度

LayUI-多图上传时，通过进度条来展示上传进度

这个需要实现滴效果是：多图上传时，根据所有图片上传的进度来展示进度条的变化，进度条初始值为空，随着图片的上传，慢慢滴由空到100%（100%表示上传成功）

知识点：动态操作进度条

实现效果如下图所示：

对应代码如下：

HTML

<div class="layui-form-item">
            <div class="layui-upload" style="width: 50%">
                <input type="hidden" name="imgs" style="width: 100%" value="{$user.imgs|default=''}">
                <input type="hidden" name="all_thumb_tmp" style="width: 100%" value="{$user.imgs|default=''}">
                <input type="hidden" name="all_thumb_tmp_local" style="width: 100%" value="">
                <!-- 多图上传按钮 -->
                <button type="button" class="layui-btn" id="test2">多图上传</button>
                <!-- 预览图 -->
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2">
                        <!-- PHP遍历 -->
                        {foreach name="$user['thumb']" item="v"}
                        <img src="{$v}" class="layui-upload-img xc" />
                        <!-- 图片右上角的删除按钮 -->
                        <span class="sxspan"  onclick="dj(this)" key="">
                            <!-- 图片右上角的删除按钮图片 -->
                            <img src="/static/admin/image/xcdel.png" style="width: 100%" alt="">
                        </span>
                        {/foreach}
                    </div>
                </blockquote>
                <!-- 进度条 -->
                <div class="layui-progress layui-progress-big multipleImgs" lay-filter="demo" lay-showPercent="true">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <!-- 按钮-开始上传 -->
                <div style="margin-bottom: 20px;">
                    <button type="button" class="layui-btn" id="btnimage">开始上传</button>
                </div>
            </div>
        </div>

CSS

.layui-upload-img {width: 92px;height: 92px; margin: 0 10px 10px 0; border: 1px solid #f3f3f3; }
.sxspan{
        position: relative;
        right: 17px;
        display: inline-block;
        width: 15px;
        height: 15px;
        top: -51px;
}
.multipleImgs {
    width: 92px;
    margin-bottom: 8px;
}

JS

 //多图上传
    var count=0; // 图片个数
    // imgnumber和max_number需要搭配使用，且最好设置成相同值
    var imgnumber = 20; // 每次选择图片时 可选择图片加到预览图的数量
    var max_number = 20; // 自定义：可上传的预览图里的图片数量
    var files = '';

	var indexload; // 加载框

    // 下面两个变量与传入图片的进度条有关
    var num = 0; // 未传入图片时，初始值设为0；传入图片后，依次根据图片数量+1
    var n; // 图片个数（因为自带count可以表示图片个数，所以这里不需要了）

    layui.use(['upload','element','layer'], function() {
        var $ = layui.jquery,
            upload  = layui.upload,
            element = layui.element,
            layer   = layui.layer;
        upload.render({
            elem: '#test2'
            ,url: "{:url('Common/uploadTwoHundred')}"
            ,multiple: true
            ,accept: 'images'
            ,number:imgnumber
            ,auto:false
            ,bindAction: '#btnimage'
            ,acceptMime: 'image/*'
            ,choose:function(obj){
                var flag = true;
                obj.preview(function(index, file, result){
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    if(count >= max_number){
                        flag = false;
                        delete files[index];
                        layer.msg('超过文件限制');
                        return false;
                    }else{
                        files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                        $('#demo2').append('<img  src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img xc"><span class="sxspan"  οnclick=dj(this,"'+index+'") key="'+count+'"><img src="/static/admin/image/xcdel.png" style="width: 100%" alt=""></span>')
                        count ++
                    }
                    //ob.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
                    //这里还可以做一些 append 文件列表 DOM 的操作
                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                });
            }
            ,before: function(obj){

                // 获取传入的图片个数（因为自带count可以表示图片个数，所以这里不需要了）
                // n = Object.getOwnPropertyNames(files).length; // 图片个数
                // console.log(n);

                if (count==0){
                    layer.msg('没有可上传的本地文件');
                    return false;
                }
                if(JSON.stringify(files)!="{}"){

                    // 进度条初始时
                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0}); // 提示框(0ms后会自动关闭)
					indexload = layer.load(1, {time: 10*1000,offset: 'auto'}); // 加载框-图片上传完之前不能进行其他操作
                }else{
                    layer.msg('没有可上传的本地文件')
                }
            }
            ,done: function(res,index){
                console.log(res);
                delete files[index];

                num++; // 传入一张图片后，num依次+1
                console.log(num);
                var finalNum = num / count * 100;
                console.log(finalNum + '%');

                if(res.code == 200){

                    // 上传图片时的进度条
                    element.progress('demo', finalNum + '%'); //可配合 layui 进度条元素使用
                    if(JSON.stringify(files) == "{}"){ // 也可以写成：if(finalNum == 100){，但在其它需要判断是否上传完毕的地方最好不要这样写哟
                        layer.msg('上传完毕', {icon: 1,time: 1000},function () {
                            layer.close(indexload); // 关闭加载框indexload（因为load默认是不会自动关闭的），可以进行其它操作了
                        });
                    }

					console.log(res);
					
					// 下面内容根据项目需求进行更改
                    var allimage =  $('input[name=all_thumb]').val();
                    var allimage_tmp =  $('input[name=all_thumb_tmp]').val();
                    var allimage_tmp_local =  $('input[name=all_thumb_tmp_local]').val();

                    if(allimage == ''){
                        $('input[name=all_thumb]').val(res.imgpath)
                        $('input[name=all_thumb_tmp]').val(allimage_tmp )
                        $('input[name=all_thumb_tmp_local]').val(res.imgpath)

                    }else{
                        $('input[name=all_thumb]').val(allimage+','+res.imgpath) // 存放最开始一来就有的和新上传的图片地址的原图
                        $('input[name=all_thumb_tmp]').val(allimage_tmp) // 存放最开始一来就有的图片地址的缩略图
                        $('input[name=all_thumb_tmp_local]').val(allimage_tmp_local+","+res.imgpath) // 存放新上传的图片地址【最后提交时，需在其最后结果后面加上.substring(1)，使其去掉最前面的逗号】


                    }


                }
            }
        });
    })

	// 图片右上角的删除符号的点击事件-删除图片
    function dj(obj,index){
        num--; // 删除一张图片后，num依次-1
        var indexss=  $('#demo2 span').index(obj); // 索引值
        $(obj).prev().remove(); // 删除图片
        $(obj).remove(); // 删除叉图标
        var allimage =  $('input[name=imgs]').val();
        var allimage_tmp =  $('input[name=all_thumb_tmp]').val();
        var allimage_tmp_local =  $('input[name=all_thumb_tmp_local]').val();

        if (allimage == null) {
            return;
        }
        var arr =  allimage.split(',');
        var arr_tmp =  allimage_tmp.split(',');
        var arr_tmp_local =  allimage_tmp_local.split(',');
        arr.splice(indexss, 1) // 删除一张对应索引值的图片原图地址
        arr_tmp.splice(indexss, 1) // 删除一张对应索引值的图片缩略图地址
        arr_tmp_local.splice(indexss, 1) // 删除一张对应索引值的新增图片的地址

        $('input[name=imgs]').val(arr.join(','));
        $('input[name=all_thumb_tmp]').val(arr_tmp.join(','));
        $('input[name=all_thumb_tmp_local]').val(arr_tmp_local.join(','));
        count--;
        if (index!=undefined){
            delete  files[index];
        }
    }

红色下划线中的files != ""不能写成JSON.stringify(files) != ""，因为：


【补充知识】上面代码中有一个很重要的知识点：获取传入的图片的个数Object.getOwnPropertyNames(files).length;，因为传入图片是一个对象，这里就采用的js获取对象属性个数的方法
这个方法参考自某优秀博主的博客：https://www.cnblogs.com/ooo0/p/6534333.html里的方法三，以防博主删除该篇博客，所以截图方法三如下：