上传媒体文件--添加显示进度条 layui的upload控件

上传媒体文件--添加显示进度条   layui的upload控件

详细上传功能请参考博客：上传文件--媒体文件+获取上传文件的属性信息 layui的upload控件 - じ逐梦 - 博客园 (cnblogs.com)

显示效果：

 参考文献：(12条消息) Layui表格中文件上传显示进度条_layui上传文件进度条_no_delay_su的博客-CSDN博客

实现过程：

1、table映射显示进度条列

/*
 * *
 * 展示选择文件
 * */
function showChoose() {
    //映射table显示选择的媒体
    table.render({
        elem: '#redioInfo'   //显示分页表格的html元素
        , cols: [[
            { title: '文件名称', field: 'mp3Name' },  //渲染返回数据
            { title: '文件大小', field: 'filesize', width: '20%' },  //渲染返回数据
            { title: '上传进度', field: 'schedule', align: 'center', templet: schedule },  //渲染返回数据(进度条)
            { title: '文件状态', field: 'mp3state', hide: true },  //渲染返回数据
            { title: '文件索引', field: 'Index', hide: true }, //渲染返回数据  --右侧显示图标使用
            { title: '文件lastModified', field: 'lastModified', hide: true },  //渲染返回数据-整理文件队列使用
            { title: 'filter', field: 'filter', hide: true },
            { title: 'progress', field: 'progress', hide: true },
            { title: '操作', field: 'stateinfo', templet: stateinfo, width: '7%' }
        ]], limit: 1000, height: '300'
        , data: mp3Arr
        , done: function (res, curr, count) { //数据渲染完毕的回调  
        }
    });
}

 进度条列模板

/**
 * 进度条
 * @param {any} d
 */
function schedule(d) {
    d.filter == undefined ? d.filter = d.Index : d.filter;
    d.progress == undefined ? d.progress = 100 : d.progress;
    var color = 'layui-bg-green';
    if (d.progress > 50 && d.progress <= 100) {
        color = 'layui-bg-green'
    } else if (d.progress > 20 && d <= 50) {
        color = 'layui-bg-orange'
    }
    //设置页面进度条
    return '<div class="layui-progress layui-progress-big" lay-showpercent="true" id="' + d.filter + '" lay-filter="progress' + d.filter + '">' +
        '<div class="layui-progress-bar ' + color + '" lay-percent="' + d.progress + '%">' +
        '</div></div>'
}

 2、layui的upload添加program

//上传进度回调 value进度值,由于是进度条同时又是多文件上传不只一个进度条，所以要保证每次进度条的类名不一致，demoCount控制类名，demoFlag保证上下一致，所以该方法一直在被调用 
//经过测试 progress的第四个参数是上传文件的Index
progress: function (value, obj, obj1, obj2) { 
　　　　　　　//控制进度条在文件预处理后再开始变化
            if (demoFlag) {
                //设置页面进度条（调用方法）
                setprogress("progress" + obj2, value);
            }
},

 

/**
 * 设置页面进度条百分比
 * @param {any} div 进度条div
 * @param {any} val 值
 */
function setprogress(div, val) {
    element.progress(div, val + '%') //设置页面进度条
}

完整JS代码：

var mp3Arr = new Array();
var table;
var element;
var files;//上传文件队列
var demoFlag = false;//控制进度条在文件预处理后再开始变化
var demoCount = ""; //控制progress组件id
layui.use(['upload', 'table', 'element'], function () {
    var upload = layui.upload; //得到 upload 对象
    table = layui.table;  //得到table对象
    element = layui.element;//得到element对象
    layui.element.render();
    //下载执行实例
    var uploadInst = upload.render({
        elem: '#redio' //绑定元素
        , url: '/extavs/avs_medium/savefile' //上传接口
        , accept: 'audio'   //指定允许上传的文件类型images（图片）、file（所有文件）、video（视频）、audio（音频）
        , auto: false //选择文件后不自动上传
        , bindAction: '#upInfo'//指定一个按钮触发上传
        , acceptMime: 'audio/mpeg'  //规定打开文件选择框时，筛选出文件类型audio/mpeg
        , multiple: true //是否允许多文件上传。设置 true即可开启。不支持ie8/9
        , number: 10 //设置同时可上传的文件数量，一般配合 multiple 参数出现。注意：该参数为 layui 2.2.3 开始新增
        , data: { //上传其他参数
            id: function () { return usbasic.q("folderid") },
        }
        , choose: function (res) {
            //将每次选择的文件追加到文件队列
            files = res.pushFile();
            //预读本地文件，如果是多文件则会遍历。（不支持ie8/9）
            res.preview(function (index, file, result) {
                demoFlag = true;
                demoCount = index;
                //最重要的
                uploadInst.config.elem.next()[0].value = '';
                //存入数组中
                var mp3Info = { "mp3Name": file.name, "filesize": (file.size / 1024/1024).toFixed(2) + "MB", "schedule": '', "mp3state": 0, "Index": index, "lastModified": file.lastModified, "filter": demoCount, "progress": 100 };
                mp3Arr.push(mp3Info);
                //是否重复
                if (mp3Arr.length > 1) {
                    for (i = 0; i < mp3Arr.length - 1; i++) {
                        if (mp3Arr[i].mp3Name == mp3Arr[mp3Arr.length - 1].mp3Name) {
                            if (mp3Arr[i].mp3state == 1) {

                                usbasic.warnMsg(mp3Arr[i].mp3Name + "本次已上传成功，无需重复上传");
                            }
                            delete files[index];
                            mp3Arr.splice(mp3Arr.length - 1, 1);
                        }
                        else if (i >= mp3Arr.length - 1) {
                            mp3Arr.push(mp3Info);
                        }
                    }
                }
                showChoose();
            });
        }
        , before: function (obj) {//上传前的判断
            if (mp3Arr.length < 0) {
                usbasic.warnMsg("请选择上传媒体文件！");
                return;
            }
        }
        , done: function (res, index, upload) {
            if (res.result == 0) {
                //usbasic.successMsg(res.msg);
                for (var i = 0; i < mp3Arr.length; i++) {
                    if (mp3Arr[i]["Index"] == index) {
                        mp3Arr[i]["mp3state"] = 1;
                    }
                }
                //删除上传队列中上传成功的对应的文件--防止重复上传
                delete files[index];
                //映射表格
                //showChoose();
            }
            else {
                usbasic.warnMsg(res.msg);
            }
            //上传完毕回调
        }
        , error: function (index, upload) {
            //请求异常回调
        },
        progress: function (value, obj, obj1, obj2) { //上传进度回调 value进度值,由于是进度条同时又是多文件上传不只一个进度条，所以要保证每次进度条的类名不一致，demoCount控制类名，demoFlag保证上下一致，所以该方法一直在被调用
            if (demoFlag) {
                //设置页面进度条
                setprogress("progress" + obj2, value);
            }
        },
    });

    //映射表格
    showChoose();
})

/*
 * *
 * 展示选择文件
 * */
function showChoose() {
    //映射table显示选择的媒体
    table.render({
        elem: '#redioInfo'   //显示分页表格的html元素
        , cols: [[
            { title: '文件名称', field: 'mp3Name' },  //渲染返回数据
            { title: '文件大小', field: 'filesize', width: '20%' },  //渲染返回数据
            { title: '上传进度', field: 'schedule', align: 'center', templet: schedule },  //渲染返回数据
            { title: '文件状态', field: 'mp3state', hide: true },  //渲染返回数据
            { title: '文件索引', field: 'Index', hide: true }, //渲染返回数据  --右侧显示图标使用
            { title: '文件lastModified', field: 'lastModified', hide: true },  //渲染返回数据-整理文件队列使用
            { title: 'filter', field: 'filter', hide: true },
            { title: 'progress', field: 'progress', hide: true },
            { title: '操作', field: 'stateinfo', templet: stateinfo, width: '7%' }
        ]], limit: 1000, height: '300'
        , data: mp3Arr
        , done: function (res, curr, count) { //数据渲染完毕的回调  
        }
    });
}

//列模板
function stateinfo(obj) {
    //获取行数id
    var rowid = obj.LAY_INDEX;
    var spanid = "mp3Name" + rowid;
    var conname = mp3Arr[rowid - 1]["mp3Name"];
    var sicon = "&#xe736;";//"&#xe726;"
    var iconcolor = "#808080";//灰色   #FF0000 红色&#xe726;
    var onmouse = "";

    if (mp3Arr[rowid - 1]["mp3state"] == 1) {
        sicon = "&#xe73a;";
        //iconcolor = "#FF0000";
       onmouse = 'onmouseover = "overshow(this)" onmouseout = "overhiden(this)"';
    }
    /*   return '<span id=' + spanid + '>' + conname + '</span><a name="' + rowid + '" href="#" class="addtnote" onclick="emptydata(2,' + rowid + ')" style="color:' + iconcolor + '"><i class="us-icon" ' + onmouse + '>' + sicon + '</i></a>';*/
    //var onmouse = 'onmouseover = "overshow(this)" onmouseout = "overhiden(this)"';
    return '<a name="' + rowid + '" href="#" class="addtnote" onclick="emptydata(2,' + rowid + ')" style="color:' + iconcolor + '"><i class="us-icon" ' + onmouse + '>' + sicon + '</i></a>';
}

/**
 * 进度条
 * @param {any} d
 */
function schedule(d) {
    d.filter == undefined ? d.filter = d.Index : d.filter;
    d.progress == undefined ? d.progress = 100 : d.progress;
    var color = 'layui-bg-green';
    if (d.progress > 50 && d.progress <= 100) {
        color = 'layui-bg-green'
    } else if (d.progress > 20 && d <= 50) {
        color = 'layui-bg-orange'
    }
    //设置页面进度条
    return '<div class="layui-progress layui-progress-big" lay-showpercent="true" id="' + d.filter + '" lay-filter="progress' + d.filter + '">' +
        '<div class="layui-progress-bar ' + color + '" lay-percent="' + d.progress + '%">' +
        '</div></div>'
}


/**
 * 设置页面进度条百分比
 * @param {any} div 进度条div
 * @param {any} val 值
 */
function setprogress(div, val) {
    element.progress(div, val + '%') //设置页面进度条
}

/**
 *点击上传前判断
 * */
function upInfo() {
    if (mp3Arr.length <= 0) {
        usbasic.warnMsg("请选择上传媒体文件！");
    }
}

/**清除媒体
* t   1清空  2单个清除
* r   指定清空媒体的行index
*/
function emptydata(t, r) {
    //清空
    if (t == 1) {
        if (mp3Arr.length <= 0) {
            return;
        }
        for (var i = 0; i < mp3Arr.length; i++) {
            //清空上传队列中对应的文件
            var index = mp3Arr[i]["Index"];
            delete files[index];
        }
        mp3Arr = new Array();
    }
    //单个清除
    if (t == 2) {
        //删除上传队列中对应的文件
        var index = mp3Arr[r - 1]["Index"];
        delete files[index];
        //获取对应下标进行数组删除
        let getLocation = mp3Arr.indexOf(mp3Arr[r - 1]);
        mp3Arr.splice(getLocation, 1);
    }
    showChoose();
    //已经上传成功的进度条设置为100
    for (var i = 0; i < mp3Arr.length; i++) {
        if (mp3Arr[i].mp3state != 0) {
            setprogress("progress" + mp3Arr[i].filter, 100);
        }
    }
}

/**i标签html样式
   * thisi  i标签对象
*/
function overshow(thisi) {
    thisi.innerHTML = "&#xe736;";
}

/**i标签html样式
*thisi  i标签对象 
*/
function overhiden(thisi) {
    thisi.innerHTML = "&#xe73a;";
}

 

自感觉当前显示效果是有点奇怪：

1、多个媒体同时上传时，多个进度条是同时显示进度的(不知道这是不是正常的)

问题解决一：

一、进度条无法显示进度百分比

 

 解决： 缺少element.render()

/**
 * 设置页面进度条百分比
 * @param {any} div 进度条div
 * @param {any} val 进度值
 */
function setprogress(div, val) {
    element.progress("progress" + div, val + '%'); //设置页面进度条
    //设置进度条百分比文本
    $("#" + div + "").attr("lay-percent", val + '%');
    element.render();
}

 

二、上传文件进行分片操作：

目的：

项目对上传文件有大小限制，所以当上传的文件(一个文件)大于设置的上传大小上限时，则对其文件进行分片(剪切)，控制器对这些片进行整合然后存储  (这种情况只是说一个文件和设置的上限对比，假如：多个文件上传情况，每个文件都很小，但是加起来大于上限也不会分片，只是单个文件与上限相比较情况)

效果图： 界面也进行了优化，进度条有百分比