Html部分
<div class="layui-form-item vedio">
<label class="layui-form-label">作品视频</label>
<div class="layui-upload-drag" >
<div id="warm_up">
</div>
<div id="warm_up_video">
</div>
</div>
</div>
<div class="layui-form-item works_oss">
<label class="layui-form-label">作品附件</label>
<div class="layui-input-block">
<span class="uploadtext" id="file">上传作品</span>
</div>
<div class="layui-input-block">
<span style="color: #ccc">上传文件格式为zip或rar</span>
</div>
<div class="layui-input-block" id="spiacltable">
</div>
</div>
Js部分：
//初始化上传组件
upload.render({
elem: '',//上传按钮id值或者class值
size: "1048576",//限制上传大小1G
exts:"mp4|MP4",//限制上传文件大小
url: "/",//文件上传地址
auto: false,
choose: function(obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//上传视频动画效果
layer.load(2,{
shade: [0.5, 'gray'],
success: function (layero) {
layero.find('.layui-layer-content').css({
'padding-left':'5px',
'padding-top': '39px',
'width': '160px'
});
}
});
//分片上传
uploader = createUploader();
Var file_progress_key= ['file_name','file_type','file_size','file_progress'];
var file_progress_value = [];
for (var index in files) {
var str = files[index].name;
var arr = str.split('.'); //注split可以用字符或字符串分割
var my = arr[0]; //这就是要取得的图片名称
file_progress_value[0] = my;
file_progress_value[1] = '视频';
file_progress_value[2] = conversion(files[index].size);
file_progress_value[3] = '0%';
$("#title").val(my);
uploader.addFile(files[index], null, null, null, '{"Vod":{}}');
uploader.startUpload();
}
set_value(file_progress_key,file_progress_value)
table.init('upload_table', {});
$('.upload_box').html('<button class="layui-btn upload_video" type="button">添加文件</button>');
do_upload = true;
return false;
},
done: function(res, index, upload) {
}
});
function createUploader() {
var aliVideoId = '';
var uploader = new AliyunUpload.Vod({
timeout: 60000,
partSize: 1048576,
parallel: 5,
retryCount: 3,
retryDuration: 2,
userId: '31846838',
onUploadstarted: function(uploadInfo) {
if (!uploadInfo.videoId) {
var title = $('#title').val();
$.post('上传地址', {
title: title,
filename: uploadInfo.file.name
}, function(suc) {
if (suc.code == 0) {
uploader.setUploadAuthAndAddress(uploadInfo, suc.data.UploadAuth, suc.data.UploadAddress, suc.data.VideoId);
} else {
layer.msg(suc.msg, {
icon: 2
})
}
}, 'json')
} else {
// 如果videoId有值，根据videoId刷新上传凭证
var refreshUrl = '刷新凭证地址' + uploadInfo.videoId
$.get(refreshUrl, function(data) {
if (data.Message) {
layer.msg('上传失败', {
icon: 2
});
$('#form-member-add').hide();
var list = uploader.listFiles();
for (var index in list) {
uploader.deleteFile(index);
}
var list = uploader.listFiles();
return;
} else {
var uploadAuth = data.UploadAuth
var uploadAddress = data.UploadAddress
var videoId = data.VideoId
uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
}
}, 'json')
}
},
// 文件上传成功
onUploadSucceed: function(uploadInfo) {
console.log(uploadInfo);
layer.closeAll('loading'); //关闭loading
aliVideoId = uploadInfo.videoId;
$('#warm_up_video').removeClass('layui-hide');
$("input[name=warm_up_video]").val(aliVideoId);
filename = uploadInfo.file.name;
$("input[name=vedio_name]").val(filename);
layer.msg("上传成功");
},
// 文件上传失败
onUploadFailed: function(uploadInfo, code, message) {
layer.msg("上传失败");
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function(uploadInfo, totalSize, progress) {
var progressPercent = Math.ceil(progress * 100)
var file_progress_key = ['file_progress'];
var file_progress_value = [progressPercent + '%'];
set_value(file_progress_key,file_progress_value)
table.init('upload_table', {});
},
// 上传凭证超时
onUploadTokenExpired: function(uploadInfo) {
var refreshUrl = '刷新凭证地址' + uploadInfo.videoId
$.get(refreshUrl, function(data) {
var uploadAuth = data.UploadAuth
uploader.resumeUploadWithAuth(uploadAuth)
}, 'json')
},
// 取消文件上传
onUploadCanceled: function(uploadInfo, code, message) {},
// 全部文件上传结束
onUploadEnd: function(uploadInfo) {}
})
return uploader
}
function conversion(v){
var num = Number(v);
var res = 0;
if(num >= 1048576){
//M为单位
res = Math.floor((num / 1048576) * 100) / 100;
res = res + 'M';
}else{
//kd单位
res = Math.floor((num / 1024) * 100) / 100;
res = res + 'kb';
}
return res;
}
function set_value(key,value){
for(var i in key){
$('.'+key[i]).text(value[i])
}
}