199 lines
6.9 KiB
HTML
199 lines
6.9 KiB
HTML
<!doctype html>
|
||
<html class="x-admin-sm">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>图片管理</title>
|
||
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
||
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
||
<script type="text/javascript" src="/x_admin/js/jq.js"></script>
|
||
<link rel="stylesheet" href="/x_admin/css/font.css">
|
||
<link rel="stylesheet" href="/x_admin/css/xadmin.css">
|
||
<script type="text/javascript" src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
|
||
<script type="text/javascript" src="/x_admin/js/xadmin.js"></script>
|
||
<style>
|
||
.content{
|
||
width: 100%;
|
||
max-height: 70%;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
justify-content: space-evenly;
|
||
}
|
||
.pic_box_upload{
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 5px 5px;
|
||
}
|
||
.pic_box_upload img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.pic_box{
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 5px 5px;
|
||
}
|
||
.pic_box:hover {
|
||
box-shadow: 0px 0px 1px;
|
||
}
|
||
.pic_box img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#fileInput {
|
||
display: none; /* 隐藏文件输入元素 */
|
||
}
|
||
.jz{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="content">
|
||
<div class="pic_box_upload" onclick="upload_action()"><img src="https://tc.pcxbc.com/tsf/upload_pic.jpg" alt=""></div>
|
||
{volist name="result" id="vo"}
|
||
<div class="pic_box" onclick="sendParamToParent('{$vo.id}','{$vo.url_data}')"><img src="{$vo.url_data}" alt=""></div>
|
||
{/volist}
|
||
</div>
|
||
<div class="layui-card-body jz">
|
||
<div id="page" style="text-align: center;">
|
||
</div>
|
||
</div>
|
||
<input type="file" id="fileInput">
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<script>
|
||
var page_num;
|
||
var laypage;
|
||
var all_page = "{$num}";
|
||
layui.use('laypage', function () {
|
||
laypage = layui.laypage;
|
||
laypage.render({
|
||
elem: 'page',
|
||
count: all_page, //数据总数，从服务端得到
|
||
limit: 20,
|
||
groups:20,
|
||
jump: function (obj, first) {
|
||
//首次不执行
|
||
if (!first) {
|
||
//obj包含了当前分页的所有参数，比如：
|
||
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
|
||
console.log(obj.limit); //得到每页显示的条数
|
||
page_num = obj.curr;
|
||
jump_page(page_num)
|
||
}
|
||
}
|
||
});
|
||
});
|
||
function jump_page(num){
|
||
load()
|
||
$.ajax({
|
||
url: "/admin/pic", //请求的url地址s
|
||
dataType: "json", //返回格式为json
|
||
async: true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data: {'page': num}, //参数值
|
||
type: "POST", //请求方式
|
||
success: function (req) {
|
||
console.log(req)
|
||
c_load();
|
||
if(req['code'] == 0){
|
||
var str,str_s,str_all="";
|
||
for (let i = 0; i < req['data']['result'].length; i++) {
|
||
str = '<div class="pic_box" onclick="sendParamToParent(\''+req['data']['result'][i]['id']+'\',\''+req['data']['result'][i]['url_data']+'\')"><img src="'+req['data']['result'][i]['url_data']+'" alt=""></div>'
|
||
str_all = str_all+str;
|
||
}
|
||
$('.content').each(function() {
|
||
$(this).find('.pic_box').remove();
|
||
});
|
||
$('.content').append(str_all);
|
||
|
||
}
|
||
},
|
||
error: function () {
|
||
//请求出错处理
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
function sendParamToParent(id,data) {
|
||
var param = [id,data]; // 这是要传递的参数
|
||
// 调用父窗口的一个函数，并传递参数
|
||
if (window.parent && window.parent.receiveParamFromIframe) {
|
||
window.parent.receiveParamFromIframe(param);
|
||
} else {
|
||
layer.msg('图片选择失败');
|
||
}
|
||
xadmin.close();
|
||
}
|
||
|
||
function upload_action(){
|
||
document.getElementById('fileInput').click();
|
||
}
|
||
|
||
$('#fileInput').on('change', function() {
|
||
// 获取被选择的文件
|
||
var fileInput = $(this)[0];
|
||
var file = fileInput.files[0];
|
||
console.log(file)
|
||
// return
|
||
// 检查是否有文件被选择
|
||
if (file) {
|
||
load()
|
||
var formdata = new FormData();
|
||
formdata.append('cover_image',file)
|
||
$.ajax({
|
||
url:"/admin/pic_upload_action", //请求的url地址
|
||
contentType:false,
|
||
processData:false,
|
||
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data:formdata, //参数值
|
||
type:"POST", //请求方式
|
||
success:function(req){
|
||
c_load()
|
||
//请求成功时处理
|
||
if(req.code == 0){
|
||
var newDiv = $('<div></div>')
|
||
.addClass('pic_box')
|
||
.attr('onclick', 'sendParamToParent(\''+req.data.id+'\',\''+req.data.url+'\')')
|
||
.append($('<img></img>')
|
||
.attr('src', req.data.url)
|
||
.attr('alt', '')
|
||
);
|
||
$('.content > div:first').after(newDiv);
|
||
layer.msg(req.msg);
|
||
}else{
|
||
layer.msg(req.msg);
|
||
}
|
||
},
|
||
error:function(){
|
||
//请求出错处理
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
//加载提示开启
|
||
function load() {
|
||
var index = layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
}
|
||
// 关闭加载提示
|
||
function c_load() {
|
||
layer.close(layer.index)
|
||
}
|
||
|
||
|
||
</script> |