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

显示效果：

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

实现过程：

/*
* *
* 展示选择文件
* */
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 '

' + '

'
}

//上传进度回调 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代码：

                            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 = "";//""
var iconcolor = "#808080";//灰色 #FF0000 红色
var onmouse = "";

if (mp3Arr\[rowid - 1\]\["mp3state"\] == 1) {  
    sicon = "";  
    //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} 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 = "";
}

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

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

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

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

目的：

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

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

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

纯干货！一文get昇腾Ascend C编程入门全部知识点