上传媒体文件--添加显示进度条 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 = "";//""
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} 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 = "";
} /**i标签html样式
*thisi i标签对象
*/
function overhiden(thisi) {
thisi.innerHTML = "";
}
Js
自感觉当前显示效果是有点奇怪:
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();
}
二、上传文件进行分片操作:
目的:
项目对上传文件有大小限制,所以当上传的文件(一个文件)大于设置的上传大小上限时,则对其文件进行分片(剪切),控制器对这些片进行整合然后存储 (这种情况只是说一个文件和设置的上限对比,假如:多个文件上传情况,每个文件都很小,但是加起来大于上限也不会分片,只是单个文件与上限相比较情况)
效果图: 界面也进行了优化,进度条有百分比
上传媒体文件--添加显示进度条 layui的upload控件的更多相关文章
- 百度开源上传组件webuploader 可上传多文件并带有进度条
//上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传. auto: true ...
- idhttp post 上传或下载时显示进度条
通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...
- idhttp post 上传或下载时显示进度条(对接idhttp1.OnWork事件)
通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...
- 解决WordPress无法上传媒体文件以及无法下载和安装主题与插件的问题
前言: 我的个人博客网站荒原之梦在安装成功WordPress之后本来是可以上传媒体文件,安装主题和插件的,但是后来不知道怎么回事就出了问题:不能上传媒体文件也不能安装主题和插件了.出现这个问题后我尝试 ...
- C# WinFrom 导入Excel文件,显示进度条
因为WINForm程序是在64位上运行如果使用另外一种快速的读取Excel的方法会报“未在本地计算机上注册“Microsoft.Jet.OLEDB.12.0”提供程序” 所以我就换了现在这种读取有点慢 ...
- ajax 上传文件,显示进度条,进度条100%,进度条隐藏,出现卡顿就隐藏进度条,显示正在加载,再显示上传完成
<form id="uploadForm" method="post" enctype="multipart/form-data"&g ...
- 使用libcurl开源库和Duilib做的下载文件并显示进度条的小工具
转载:http://blog.csdn.net/mfcing/article/details/43603525 转载:http://blog.csdn.net/infoworld/article/de ...
- C# Winform下载文件并显示进度条
private void btnDown_Click(object sender, EventArgs e) { DownloadFile("http://localhost:1928/We ...
- Winform下载文件并显示进度条
本来是要研究怎样判断下载完成,结果找到这个方法,可以在这个方法完成之后提示下载完成. 代码如下: using System; using System.Collections.Generic; usi ...
- 通过HttpUrlConnection下载文件并显示进度条
实现效果: 核心下载块: int count = 0; URL url = new URL("http://hezuo.downxunlei.com/xunlei_hezuo/thunder ...
随机推荐
- Servlet(服务连接器)
Servlet(Server Applet):是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据 ...
- 浏览器tab标签切换触发监听事件visibilitychange
document.addEventListener('visibilitychange', function() { if(document.hidden){ //当页面切换或隐藏时触发的代码,可以用 ...
- fabric学习笔记8
fabric学习笔记8 20201303张奕博 2023.1.19 具体结构: Wallet中的X.509数字证书将组织和持有者联系起来,使得持有者能够有权限连接到网络,不同的持有者身份拥有不同的权限 ...
- 利用socket以及多线程、文件流等方法实现通信,互发文本信息以及文件
服务器端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- Vue项目中简易演示axios解耦
Vue项目中简易演示axios解耦 -api\sug.js (配置获取方法) -utils\request.js (配置自定义axios实例) -vue.config.js (解决跨域) -demo. ...
- python实现Excel的表头与索引之间的转换
字母转数字 def get_index(capital): """ 大写字母(Excel列头)转索引 :param capital: 'A' --> 0, 'AA' ...
- ubuntu下编译安装uWebSockets
最近开始接触websocket,第一次装的时候,还是遇到了些问题,这里记录一下 1.从git下载uWebSockets 地址:https://github.com/uNetworking/uWebSo ...
- vue.config.js --- vue-cli 4.0配置
// 所有配置请参考 https://cli.vuejs.org/zh/config/ module.exports = { /** * publicPath * hash 模式下可使用 * publ ...
- docker下载java镜像,执行xxx.jar文件
docker pull java:8u111
- 解决GitHub下载速度慢下载失败的问题
最近在GitHub上拉取代码时,每次git clone都是文件下载完了发现连接就断掉了,或者下载压缩包显示网络连接错误的情况.下面介绍找到的解决方法: 1.打开码云(当然不是福报)https://gi ...