231 lines
11 KiB
HTML
231 lines
11 KiB
HTML
|
<div class="upload-audio-box">
|
|||
|
|
<div id="upload_audio_list{$append}" class="upload_audio_list upload-items-list">
|
|||
|
|
{if !empty($audios)}
|
|||
|
|
{php}$audios = json_decode($audios, true);{/php}
|
|||
|
|
{foreach $audios as $k => $audio}
|
|||
|
|
<dd class="item_audio upload-items-one" id="audio_{$k}">
|
|||
|
|
<div class="audios">
|
|||
|
|
<div class="operate">
|
|||
|
|
<i onclick="UPLOAD_AUDIO_DEL(this)" class="close layui-icon"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="layer-audios">
|
|||
|
|
<audio src="{$audio.src}" controls="controls">您的浏览器不支持audio标签。</audio>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info">
|
|||
|
|
<textarea name="audios{$append}[{$k}][title]" class="layui-textarea" placeholder="标题">{$audio.title}</textarea>
|
|||
|
|
<textarea name="audios{$append}[{$k}][desc]" class="layui-textarea" placeholder="描述">{$audio.desc}</textarea>
|
|||
|
|
<input type="text" class="layui-input" name="audios{$append}[{$k}][alt]" value="{$audio.alt ?? ''}" placeholder="ALT属性，选填" />
|
|||
|
|
<input type="text" class="layui-input" name="audios{$append}[{$k}][link]" value="{$audio.link ?? ''}" placeholder="链接，选填" />
|
|||
|
|
<input type="hidden" name="audios{$append}[{$k}][src]" value="{$audio.src}" />
|
|||
|
|
</div>
|
|||
|
|
</dd>
|
|||
|
|
{/foreach}
|
|||
|
|
{/if}
|
|||
|
|
</div>
|
|||
|
|
<div class="upload_audio_btn upload_file_btn" id="upload-audios{$append}">
|
|||
|
|
<i></i><p>音频上传</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="upload_img_btn" id="serverAudioList{$append}" style="margin-left: 15px;">
|
|||
|
|
<i></i><p>服务器音频</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-clear"></div>
|
|||
|
|
<div class="upload-image-points">
|
|||
|
|
<div class="layui-form-mid layui-word-aux">服务器最大支持：{$post_max_size}以内的文件上传</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<style type="text/css">
|
|||
|
|
#selectable .ui-selecting { background: #FECA40; }
|
|||
|
|
#selectable .ui-selected { background: #F39814; color: white; }
|
|||
|
|
#selectable { list-style-type: none; margin: 0; padding: 0;}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var _token = $('#token').attr('content');
|
|||
|
|
var page = 1;
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
var numid = $('#upload_audio_list{$append}>dd').length;
|
|||
|
|
$(".upload_audio_list").sortable({
|
|||
|
|
cursor: "move",
|
|||
|
|
items: "dd", //只是li可以拖动
|
|||
|
|
opacity: 0.6, //拖动时，透明度为0.6
|
|||
|
|
revert: true, //释放时，增加动画
|
|||
|
|
update: function(event, ui) { //更新排序之后
|
|||
|
|
//alert($(this).sortable("toArray"));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var uploadUrl = "{:url('manager.upload/audio')}";
|
|||
|
|
layui.use(['upload', 'element'], function() {
|
|||
|
|
var upload = layui.upload;
|
|||
|
|
var element = layui.element;
|
|||
|
|
|
|||
|
|
upload.render({
|
|||
|
|
elem: '#upload-audios{$append}',
|
|||
|
|
url: uploadUrl,
|
|||
|
|
data: {_token:_token},
|
|||
|
|
field: 'audio',
|
|||
|
|
multiple: false,
|
|||
|
|
accept: 'audio',
|
|||
|
|
acceptMime: 'audio/mpeg',
|
|||
|
|
exts: 'mp3',
|
|||
|
|
before: function(obj) {
|
|||
|
|
layer.msg('文件上传中...', {
|
|||
|
|
icon: 16,
|
|||
|
|
shade: 0.01,
|
|||
|
|
time: 0
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
done: function(res) {
|
|||
|
|
if(res.code == 0){
|
|||
|
|
layer.close(layer.msg());
|
|||
|
|
$('#upload_audio_list{$append}').append('<dd class="item_audio" id="audio_' + numid +'">'+
|
|||
|
|
'<div class="audios">' +
|
|||
|
|
'<div class="operate"><i onclick="UPLOAD_AUDIO_DEL(this)" class="close layui-icon"></i></div>'+
|
|||
|
|
'<div class="layer-audios"><audio src="' +res.data.src +'" controls="controls">您的浏览器不支持audio标签。</audio></div>' +
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="info">' +
|
|||
|
|
'<textarea name="audios{$append}['+numid+'][title]" class="layui-textarea" placeholder="标题"></textarea>' +
|
|||
|
|
'<textarea name="audios{$append}['+numid+'][desc]" class="layui-textarea" placeholder="描述"></textarea>' +
|
|||
|
|
'<input type="text" class="layui-input" name="audios{$append}['+numid+'][alt]" value="" placeholder="ALT属性，选填" />'+
|
|||
|
|
'<input type="text" class="layui-input" name="audios{$append}['+numid+'][link]" value="" placeholder="链接，选填" />'+
|
|||
|
|
'<input type="hidden" name="audios{$append}['+numid+'][src]" value="' +res.data.src + '" />' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</dd>');
|
|||
|
|
numid++;
|
|||
|
|
$(window).trigger("resize");
|
|||
|
|
}else{
|
|||
|
|
layer.msg(res.msg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$('#serverAudioList{$append}').click(function(){
|
|||
|
|
var html = '';
|
|||
|
|
page = 1;
|
|||
|
|
$.ajax('/manager/file/list',{
|
|||
|
|
data:{
|
|||
|
|
type:'audio',
|
|||
|
|
page:page,
|
|||
|
|
size:30
|
|||
|
|
},
|
|||
|
|
headers: {
|
|||
|
|
'X-CSRF-TOKEN': _token
|
|||
|
|
},
|
|||
|
|
dataType:'json',//服务器返回json格式数据
|
|||
|
|
type:'post',//HTTP请求类型
|
|||
|
|
timeout:10000,//超时时间设置为10秒；
|
|||
|
|
success:function(data){
|
|||
|
|
if(data.code == 0){
|
|||
|
|
if(data.data.length > 0){
|
|||
|
|
html += '<div class="layui-card-body"><div class="serverAudiosList"><ul id="selectable">'
|
|||
|
|
$.each(data.data,function(i,item){
|
|||
|
|
html += '<li>' +
|
|||
|
|
'<audio controls="controls" src="'+item.src+'"></audio>' +
|
|||
|
|
'<p onclick="audioListUrl(this, ' + numid + ')" data-box="upload_audio_list{$append}">'+item.name+'</p>'+
|
|||
|
|
'</li>'
|
|||
|
|
})
|
|||
|
|
html += '</ul></div>';
|
|||
|
|
if(data.data.length >= 30){
|
|||
|
|
html += '<div class="serverMore"><a data-box="upload_audio_list{$append}" onclick="audiosList(this, ' + numid + ')">加载更多</a></div>'
|
|||
|
|
page++
|
|||
|
|
}
|
|||
|
|
html += '<div class="layui-clear"></div></div>';
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '服务器音频',
|
|||
|
|
shadeClose: true,
|
|||
|
|
area: ['800px',''], //宽高
|
|||
|
|
move: false,
|
|||
|
|
content: html,
|
|||
|
|
success:function(layero, index) {
|
|||
|
|
alertRender()
|
|||
|
|
layero.find('.serverAudiosList ul li p').attr('data-id',index)
|
|||
|
|
layero.find('.serverMore a').attr('data-id',index)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
numid++;
|
|||
|
|
}else{
|
|||
|
|
layer.msg('暂无数据')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error:function(xhr,type,errorThrown){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function audioListUrl(obj, numid){
|
|||
|
|
var audioSrc = $(obj).parent().find('audio').attr('src');
|
|||
|
|
var imTpl = '<dd class="item_audio upload-items-one" id="audio_' + numid +'">'+
|
|||
|
|
'<div class="audios">' +
|
|||
|
|
'<div class="operate"><i onclick="UPLOAD_AUDIO_DEL(this)" class="close layui-icon"></i></div>'+
|
|||
|
|
'<div class="layer-audios"><audio src="'+ audioSrc +'" controls="controls">您的浏览器不支持audio标签。</audio></div>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'<div class="info">' +
|
|||
|
|
'<textarea name="audios{$append}['+numid+'][title]" class="layui-textarea" placeholder="标题"></textarea>' +
|
|||
|
|
'<textarea name="audios{$append}['+numid+'][desc]" class="layui-textarea" placeholder="描述"></textarea>' +
|
|||
|
|
'<input type="text" class="layui-input" name="audios{$append}['+numid+'][alt]" value="" placeholder="ALT属性，选填" />'+
|
|||
|
|
'<input type="text" class="layui-input" name="audios{$append}['+numid+'][link]" value="" placeholder="链接，选填" />'+
|
|||
|
|
'<input type="hidden" name="audios{$append}['+numid+'][src]" value="' + audioSrc + '" />' +
|
|||
|
|
'</div>' +
|
|||
|
|
'</dd>';
|
|||
|
|
numid++;
|
|||
|
|
$('#'+$(obj).attr('data-box')).append(imTpl);
|
|||
|
|
parent.layer.close($(obj).attr('data-id'));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function audiosList(obj, numid){
|
|||
|
|
$.ajax('/manager/file/list',{
|
|||
|
|
data:{
|
|||
|
|
type:'audio',
|
|||
|
|
page:page,
|
|||
|
|
size:30
|
|||
|
|
},
|
|||
|
|
headers: {
|
|||
|
|
'X-CSRF-TOKEN': _token
|
|||
|
|
},
|
|||
|
|
dataType:'json',//服务器返回json格式数据
|
|||
|
|
type:'post',//HTTP请求类型
|
|||
|
|
timeout:10000,//超时时间设置为10秒；
|
|||
|
|
success:function(data){
|
|||
|
|
if(data.code == 0){
|
|||
|
|
if(data.data.length > 0){
|
|||
|
|
var html = ''
|
|||
|
|
$.each(data.data,function(i,item){
|
|||
|
|
html += '<li>' +
|
|||
|
|
'<audio controls="controls" src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" ></audio>' +
|
|||
|
|
'<p onclick="audioListUrl(this, ' + numid + ')" data-box="'+$(obj).attr('data-box')+'">'+item.name+'</p>'+
|
|||
|
|
'</li>'
|
|||
|
|
})
|
|||
|
|
$(obj).parent().parent().find('.serverAudiosList ul').append(html)
|
|||
|
|
$(window).trigger("resize");
|
|||
|
|
if(data.data.length < 30){
|
|||
|
|
$(obj).parent().append('<p>没有了</p>')
|
|||
|
|
$(obj).parent().find('a').remove();
|
|||
|
|
}else{
|
|||
|
|
page++;
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
layer.msg(data.msg)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error:function(xhr,type,errorThrown){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除上传音频
|
|||
|
|
function UPLOAD_AUDIO_DEL(divs) {
|
|||
|
|
$(divs).closest('dd.item_audio').remove();
|
|||
|
|
}
|
|||
|
|
</script>
|