548 lines
25 KiB
PHP
548 lines
25 KiB
PHP
<?php
|
||
|
||
/**
|
||
* @author Any
|
||
* @description KISS
|
||
* @date 2020-12-10
|
||
* @version 1.0.0
|
||
*
|
||
* _____LOG_____
|
||
*
|
||
*/
|
||
//引入layui-2.5.5
|
||
$layui_js_file = "/statics/layuiadmin/layui/layui.all.2.5.5.js?v=1.0.0";
|
||
$this->registerJsFile($layui_js_file, ['depends' => 'app\modules\admin\assets\AppAsset']);
|
||
?>
|
||
|
||
<?php if($accept == "images"):?>
|
||
<?php if(!$multiple):?>
|
||
<div class="layui-form-item itbt-upload-group" id="<?= $id ?>">
|
||
<label class="layui-form-label <?=$required ? 'required' : ''?>"><?= $label ?></label>
|
||
<div class="layui-inline itbt-upload-group-input">
|
||
<input type="text" name="<?= $name ?>" value="<?= $value ?>" class="layui-input itbt-upload-file-input" lay-verify="<?=$required?>">
|
||
</div>
|
||
<div class="layui-inline itbt-upload-group-btn">
|
||
<button type="button" class="layui-btn" ><i class="layui-icon"></i></button>
|
||
</div>
|
||
<div class="layui-input-block">
|
||
<div class="layui-upload">
|
||
<div class="layui-upload-list">
|
||
<div class="layui-upload-img-wrap">
|
||
<img class="layui-upload-img" src="<?= $value ?>">
|
||
<p class="layui-upload-errmsg"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux"><?= $tip ?></div>
|
||
</div>
|
||
<div class="layui-input-block layui-clear">
|
||
<div id="<?=$id?>_progress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="<?=$id?>_progress">
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php else:?>
|
||
<div class="layui-form-item itbt-upload-group" id="<?= $id ?>">
|
||
<label class="layui-form-label <?=$required ? 'required' : ''?>"><?= $label ?></label>
|
||
<div class="layui-inline itbt-upload-group-input">
|
||
<input type="text" name="" value="" class="layui-input itbt-upload-file-input" disabled="" lay-verify="">
|
||
</div>
|
||
<div class="layui-inline itbt-upload-group-btn">
|
||
<button type="button" class="layui-btn" ><i class="layui-icon"></i></button>
|
||
</div>
|
||
<div class="layui-input-block">
|
||
<div class="layui-upload">
|
||
<div class="layui-upload-list layui-clear">
|
||
<div class="layui-upload-img-wrap layui-float-left" v-for="(item,index) in gallery">
|
||
<img class="layui-upload-img" :src="item">
|
||
<div class="img-remove-btn" v-on:click="remove(index)"><i class="layui-icon layui-icon-close-fill"></i></div>
|
||
<div class="img-move-btn img-move-left-btn" v-on:click="move_left(index)"><i class="layui-icon layui-icon-left"></i></div>
|
||
<div class="img-move-btn img-move-right-btn" v-on:click="move_right(index)"><i class="layui-icon layui-icon-right"></i></div>
|
||
<div class="layui-upload-errmsg" ></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux"><?= $tip ?></div>
|
||
</div>
|
||
<div class="layui-input-block layui-clear">
|
||
<div id="<?=$id?>_progress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="<?=$id?>_progress">
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php else:?>
|
||
<?php if(!$multiple):?>
|
||
<div class="layui-form-item itbt-upload-group" id="<?= $id ?>">
|
||
<label class="layui-form-label <?=$required ? 'required' : ''?>"><?= $label ?></label>
|
||
<div class="layui-inline itbt-upload-group-input">
|
||
<input type="text" name="<?= $name ?>" value="<?= $value ?>" class="layui-input itbt-upload-file-input" lay-verify="<?=$required?>">
|
||
</div>
|
||
<div class="layui-inline itbt-upload-group-btn">
|
||
<button type="button" class="layui-btn" ><i class="layui-icon"></i></button>
|
||
</div>
|
||
<div class="layui-input-block">
|
||
<div class="layui-form-mid layui-word-aux"><?= $tip ?></div>
|
||
<div class="layui-form-mid layui-word-aux layui-upload-errmsg"></div>
|
||
</div>
|
||
<div class="layui-input-block layui-clear">
|
||
<div id="<?=$id?>_progress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="<?=$id?>_progress">
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php else:?>
|
||
<div class="layui-form-item itbt-upload-group" id="<?= $id ?>">
|
||
<label class="layui-form-label <?=$required ? 'required' : ''?>"><?= $label ?></label>
|
||
<div class="layui-inline itbt-upload-group-input">
|
||
<input type="text" name="" value="" class="layui-input itbt-upload-file-input" disabled="" lay-verify="<?=$required?>">
|
||
</div>
|
||
<div class="layui-inline itbt-upload-group-btn">
|
||
<button type="button" class="layui-btn" ><i class="layui-icon"></i></button>
|
||
</div>
|
||
<div class="layui-input-block">
|
||
<div class="layui-upload">
|
||
<div class="layui-row">
|
||
<div class="layui-col-md9">
|
||
<table class="layui-table layui-upload-list" lay-size="sm" v-if="filelist.length != 0">
|
||
<thead>
|
||
<tr>
|
||
<th>名称</th>
|
||
<th>文件</th>
|
||
<!-- <th>大小</th>-->
|
||
<th>状态</th>
|
||
<th style="width:188px">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="">
|
||
<tr v-for="(item,index) in filelist">
|
||
<td>{{item.name}}</td>
|
||
<td>{{item.url}}</td>
|
||
<!-- <td>{{item.size_cn}}</td>-->
|
||
<td>
|
||
<template v-if="item.status == 0">
|
||
<span class="layui-badge layui-bg-gray">待上传</span>
|
||
</template>
|
||
<template v-if="item.status == 1">
|
||
{{item.progress}}%
|
||
</template>
|
||
<template v-if="item.status == 2">
|
||
<span class="layui-badge layui-bg-red">上传失败</span>
|
||
</template>
|
||
<template v-if="item.status == 3">
|
||
<span class="layui-badge layui-bg-green">上传成功</span>
|
||
</template>
|
||
</td>
|
||
<td>
|
||
<template v-if="item.status == 3">
|
||
<a class="layui-btn layui-btn-xs" :href="item.url" target="_blank">预览</a>
|
||
</template>
|
||
<a class="layui-btn layui-btn-xs layui-btn-danger" v-on:click="remove(index)">删除</a>
|
||
<a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="move_up(index)" v-if="index != 0">上移</a>
|
||
<a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="move_down(index)" v-if="index != filelist.length - 1">下移</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-mid layui-word-aux"><?= $tip ?></div>
|
||
</div>
|
||
<div class="layui-input-block layui-clear">
|
||
<div id="<?=$id?>_progress" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="<?=$id?>_progress">
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
|
||
<script>
|
||
<?php $this->beginBlock('js_script_wrap') ?>
|
||
<?php if($accept == "images"):?>
|
||
<?php if(!$multiple):?>
|
||
//单图上传
|
||
(function (layui) {
|
||
layui.use(['upload', 'element'],function(){
|
||
var uploader = layui.upload
|
||
, element = layui.element;
|
||
var $ = layui.$;
|
||
var uploader_control = $("#" + "<?= $id ?>");
|
||
var uploader_btn = uploader_control.find(".itbt-upload-group-btn");
|
||
var uploader_list = uploader_control.find(".layui-upload-list");
|
||
$('#<?=$id?>_progress').hide();
|
||
|
||
var uploader_init = uploader.render({
|
||
elem: uploader_btn
|
||
, url: '<?= $url ?>'
|
||
, accept: '<?=$accept?>'
|
||
, exts:'png|jpg|jpeg|gif|ico|bmp'
|
||
, before: function (obj) {
|
||
element.progress('<?=$id?>_progress', "0%");
|
||
$('#<?=$id?>_progress').show();
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
uploader_list.eq(0).find(".layui-upload-img").attr('src', result); //图片链接（base64）
|
||
});
|
||
}
|
||
, progress: function(n, elem){
|
||
var per = n + '%';
|
||
element.progress('<?=$id?>_progress', per);
|
||
}
|
||
, done: function (res) {
|
||
$('#<?=$id?>_progress').hide();
|
||
//如果上传失败
|
||
if (res.code != 0) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
//上传成功
|
||
uploader_list.eq(0).find(".layui-upload-errmsg").html('');
|
||
uploader_control.find(".itbt-upload-file-input").attr('value', res.data.url);
|
||
}
|
||
, error: function () {
|
||
element.progress('<?=$id?>_progress', "0%");
|
||
//演示失败状态，并实现重传
|
||
uploader_list.eq(0).find(".layui-upload-errmsg").html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
|
||
uploader_list.eq(0).find(".layui-upload-errmsg").find('.upload-reload').on('click', function () {
|
||
uploader_init.upload();
|
||
});
|
||
}
|
||
});
|
||
})
|
||
})(layui);
|
||
<?php else:?>
|
||
//多图上传
|
||
var _gallery_<?= $id ?> = JSON.parse('<?=$value?>');
|
||
(function (layui) {
|
||
var _gallery_<?= $id ?>_vm = new Vue({
|
||
el:'#<?= $id ?> .layui-upload-list',
|
||
data:{
|
||
gallery:_gallery_<?= $id ?>
|
||
},
|
||
methods:{
|
||
}
|
||
});
|
||
_gallery_<?= $id ?>_vm.move_right = function(index){
|
||
var gallery = _gallery_<?= $id ?>_vm.gallery;
|
||
if(index == gallery.length - 1){
|
||
return;
|
||
}
|
||
var temp = gallery[index];
|
||
gallery[index] = gallery[index+1];
|
||
gallery[index+1] = temp;
|
||
_gallery_<?= $id ?>_vm.gallery = gallery;
|
||
_gallery_<?= $id ?>_vm.$forceUpdate();
|
||
|
||
_gallery_<?= $id ?> = gallery;
|
||
};
|
||
_gallery_<?= $id ?>_vm.move_left = function(index){
|
||
var gallery = _gallery_<?= $id ?>_vm.gallery;
|
||
if(index == 0){
|
||
return;
|
||
}
|
||
var temp = gallery[index];
|
||
gallery[index] = gallery[index-1];
|
||
gallery[index-1] = temp;
|
||
_gallery_<?= $id ?>_vm.gallery = gallery;
|
||
_gallery_<?= $id ?>_vm.$forceUpdate();
|
||
|
||
_gallery_<?= $id ?> = gallery;
|
||
};
|
||
_gallery_<?= $id ?>_vm.remove = function(index){
|
||
var gallery = _gallery_<?= $id ?>_vm.gallery;
|
||
var _gallery = [];
|
||
for(var i in gallery){
|
||
if(i != index){
|
||
_gallery.push(gallery[i])
|
||
}
|
||
}
|
||
_gallery_<?= $id ?>_vm.gallery = _gallery;
|
||
|
||
_gallery_<?= $id ?> = _gallery;
|
||
};
|
||
|
||
layui.use(['upload', 'element'],function(){
|
||
var uploader = layui.upload
|
||
, element = layui.element;
|
||
var $ = layui.$;
|
||
var uploader_control = $("#" + "<?= $id ?>");
|
||
var uploader_btn = uploader_control.find(".itbt-upload-group-btn");
|
||
|
||
var gallery_img_list = {};
|
||
var gallery_img_counter = 0;
|
||
var gallery_img_total = 0;
|
||
$('#<?=$id?>_progress').hide();
|
||
|
||
var uploader_init = uploader.render({
|
||
elem: uploader_btn
|
||
, url: '<?= $url ?>'
|
||
, accept: '<?=$accept?>'
|
||
, exts:'png|jpg|jpeg|gif|ico|bmp'
|
||
,multiple: <?=$multiple?>
|
||
, before: function (obj) {
|
||
element.progress('<?=$id?>_progress', "0%");
|
||
$('#<?=$id?>_progress').show();
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
gallery_img_total += 1;
|
||
});
|
||
}
|
||
,allDone: function(obj){
|
||
for(var k in gallery_img_list){
|
||
_gallery_<?= $id ?>_vm.gallery.push(gallery_img_list[k])
|
||
}
|
||
$('#<?=$id?>_progress').hide();
|
||
//init
|
||
gallery_img_list = {};
|
||
gallery_img_counter = 0;
|
||
gallery_img_total = 0;
|
||
|
||
}
|
||
, done: function (res,index) {
|
||
//如果上传失败
|
||
if (res.code != 0) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
//上传成功
|
||
index = index.split("-").pop();
|
||
gallery_img_list[index] = res.data.url;
|
||
gallery_img_counter += 1;
|
||
}
|
||
, progress: function(n, elem){
|
||
var per = 100 / gallery_img_total * n /100 + (100 / gallery_img_total) * gallery_img_counter;
|
||
per = per.toFixed(2);
|
||
per = per + "%";
|
||
element.progress('<?=$id?>_progress', per);
|
||
}
|
||
, error: function () {
|
||
}
|
||
});
|
||
})
|
||
})(layui);
|
||
<?php endif; ?>
|
||
<?php else:?>
|
||
<?php if(!$multiple):?>
|
||
//单文件上传
|
||
(function (layui) {
|
||
layui.use(['upload'],function(){
|
||
var uploader = layui.upload
|
||
, element = layui.element;
|
||
var $ = layui.$;
|
||
var uploader_control = $("#" + "<?= $id ?>");
|
||
var uploader_btn = uploader_control.find(".itbt-upload-group-btn");
|
||
var uploader_list = uploader_control.find(".layui-upload-list");
|
||
$('#<?=$id?>_progress').hide();
|
||
|
||
var uploader_init = uploader.render({
|
||
elem: uploader_btn
|
||
, url: '<?= $url ?>'
|
||
, accept: '<?=$accept?>'
|
||
, before: function (obj) {
|
||
element.progress('<?=$id?>_progress', "0%");
|
||
$('#<?=$id?>_progress').show();
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
|
||
});
|
||
}
|
||
, progress: function(n, elem){
|
||
var per = n + '%';
|
||
element.progress('<?=$id?>_progress', per);
|
||
}
|
||
, done: function (res) {
|
||
$('#<?=$id?>_progress').hide();
|
||
//如果上传失败
|
||
if (res.code != 0) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
//上传成功
|
||
uploader_control.find(".itbt-upload-file-input").attr('value', res.data.url);
|
||
uploader_control.find(".layui-upload-errmsg").html('');
|
||
}
|
||
, error: function () {
|
||
element.progress('<?=$id?>_progress', "0%");
|
||
//演示失败状态，并实现重传
|
||
uploader_control.find(".layui-upload-errmsg").html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
|
||
uploader_control.find(".layui-upload-errmsg").find('.upload-reload').on('click', function () {
|
||
uploader_init.upload();
|
||
});
|
||
}
|
||
});
|
||
})
|
||
})(layui);
|
||
<?php else:?>
|
||
//多文件上传
|
||
var _filelist_<?= $id ?> = JSON.parse('<?=$value?>');
|
||
(function (layui) {
|
||
function filelist_format(list){
|
||
for(var i in list){
|
||
if(list[i]['url'] === undefined){
|
||
list[i]['url'] = "--";
|
||
}
|
||
if(list[i]['name'] === undefined){
|
||
list[i]['name'] = "--";
|
||
}
|
||
if(list[i]['status'] === undefined){
|
||
list[i]['status'] = 3;
|
||
}
|
||
if(list[i]['progress'] === undefined){
|
||
list[i]['progress'] = 100;
|
||
}
|
||
if(list[i]['size'] === undefined){
|
||
list[i]['size'] = 0;
|
||
}
|
||
if(list[i]['size_cn'] === undefined){
|
||
list[i]['size_cn'] = "--";
|
||
}
|
||
if(list[i]['type'] === undefined){
|
||
list[i]['type'] = "--";
|
||
}
|
||
}
|
||
return list;
|
||
}
|
||
_filelist_<?= $id ?> = filelist_format(_filelist_<?= $id ?>);
|
||
|
||
var _filelist_<?= $id ?>_vm = new Vue({
|
||
el:'#<?= $id ?> .layui-upload-list',
|
||
data:{
|
||
filelist:_filelist_<?= $id ?>,
|
||
},
|
||
methods:{
|
||
}
|
||
});
|
||
_filelist_<?= $id ?>_vm.remove = function(index){
|
||
var filelist = _filelist_<?= $id ?>_vm.filelist;
|
||
var _filelist = [];
|
||
for(var i in filelist){
|
||
if(i != index){
|
||
_filelist.push(filelist[i])
|
||
}
|
||
}
|
||
_filelist_<?= $id ?>_vm.filelist = _filelist;
|
||
|
||
_filelist_<?= $id ?> = _filelist;
|
||
};
|
||
_filelist_<?= $id ?>_vm.move_down = function(index){
|
||
var filelist = _filelist_<?= $id ?>_vm.filelist;
|
||
if(index == filelist.length - 1){
|
||
return;
|
||
}
|
||
var temp = filelist[index];
|
||
filelist[index] = filelist[index+1];
|
||
filelist[index+1] = temp;
|
||
_filelist_<?= $id ?>_vm.filelist = filelist;
|
||
_filelist_<?= $id ?>_vm.$forceUpdate();
|
||
|
||
_filelist_<?= $id ?> = filelist;
|
||
};
|
||
_filelist_<?= $id ?>_vm.move_up = function(index){
|
||
var filelist = _filelist_<?= $id ?>_vm.filelist;
|
||
if(index == 0){
|
||
return;
|
||
}
|
||
var temp = filelist[index];
|
||
filelist[index] = filelist[index-1];
|
||
filelist[index-1] = temp;
|
||
_filelist_<?= $id ?>_vm.filelist = filelist;
|
||
_filelist_<?= $id ?>_vm.$forceUpdate();
|
||
|
||
_filelist_<?= $id ?> = filelist;
|
||
};
|
||
//单位转换
|
||
function size_format(size){
|
||
if(size < 1024){
|
||
return size+"BYTE";
|
||
}
|
||
if(size < 1024 * 1024){
|
||
size = size / 1024
|
||
size = size.toFixed(2);
|
||
return size+"KB";
|
||
}
|
||
if(size < 1024 * 1024 * 1024){
|
||
size = size / 1024 / 1024
|
||
size = size.toFixed(2);
|
||
return size+"MB";
|
||
}
|
||
size = size / 1024 / 1024 /1024
|
||
size = size.toFixed(2);
|
||
return size+"GB";
|
||
}
|
||
layui.use(['upload', 'element'],function(){
|
||
var uploader = layui.upload
|
||
, element = layui.element;
|
||
var $ = layui.$;
|
||
var uploader_control = $("#" + "<?= $id ?>");
|
||
var uploader_btn = uploader_control.find(".itbt-upload-group-btn");
|
||
|
||
var filelist_list = {};
|
||
var filelist_counter = 0;
|
||
var filelist_total = 0;
|
||
$('#<?=$id?>_progress').hide();
|
||
|
||
var uploader_init = uploader.render({
|
||
elem: uploader_btn
|
||
, url: '<?= $url ?>'
|
||
, accept: '<?=$accept?>'
|
||
,multiple: <?=$multiple?>
|
||
, before: function (obj) {
|
||
element.progress('<?=$id?>_progress', '0%');
|
||
$('#<?=$id?>_progress').show();
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
filelist_total += 1;
|
||
index = index.split("-").pop();
|
||
if(!filelist_list[index]){
|
||
filelist_list[index] = [];
|
||
};
|
||
filelist_list[index]['name'] = file.name;
|
||
filelist_list[index]['progress'] = 0;
|
||
filelist_list[index]['status'] = 0;
|
||
});
|
||
}
|
||
,allDone: function(obj){
|
||
for(var k in filelist_list){
|
||
_filelist_<?= $id ?>_vm.filelist.push(filelist_list[k])
|
||
}
|
||
|
||
$('#<?=$id?>_progress').hide();
|
||
|
||
filelist_list = {};
|
||
filelist_counter = 0;
|
||
filelist_total = 0;
|
||
}
|
||
, done: function (res,index) {
|
||
//如果上传失败
|
||
if (res.code != 0) {
|
||
return layer.msg(res.msg);
|
||
}
|
||
//上传成功
|
||
index = index.split("-").pop();
|
||
filelist_list[index]['url'] = res.data.url;
|
||
filelist_list[index]['size'] = res.data.size;
|
||
filelist_list[index]['size_cn'] = size_format(res.data.size);
|
||
filelist_list[index]['type'] = res.data.type;
|
||
filelist_list[index]['progress'] = 100;
|
||
filelist_list[index]['status'] = 3;
|
||
|
||
filelist_counter += 1;
|
||
|
||
}
|
||
, progress: function(n, elem){
|
||
var per = 100 / filelist_total * n /100 + (100 / filelist_total) * filelist_counter;
|
||
per = per.toFixed(2);
|
||
per = per + "%";
|
||
element.progress('<?=$id?>_progress', per);
|
||
}
|
||
, error: function (index, upload) {
|
||
index = index.split("-").pop();
|
||
filelist_list[index]['status'] = 2;
|
||
}
|
||
});
|
||
})
|
||
})(layui);
|
||
<?php endif; ?>
|
||
<?php endif; ?>
|
||
<?php $this->endBlock(); ?>
|
||
</script>
|
||
<?php $this->registerJs($this->blocks['js_script_wrap'], \yii\web\View::POS_END); ?>
|