209 lines
7.8 KiB
HTML
209 lines
7.8 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.pic_url}')"><img src="{$vo.pic_url}" alt=""></div>
|
|||
|
|
{/volist}
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-card-body jz">
|
|||
|
|
<div id="page" style="text-align: center;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<input type="file" id="fileInput" multiple>
|
|||
|
|
</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: "/k/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 files = fileInput.files;
|
|||
|
|
// 检查是否有文件被选择
|
|||
|
|
if (files.length > 0) {
|
|||
|
|
load()
|
|||
|
|
var formdata = new FormData();
|
|||
|
|
// 添加所有文件到FormData
|
|||
|
|
for (var i = 0; i < files.length; i++) {
|
|||
|
|
formdata.append('image[]', files[i]); // 注意这里改为数组形式
|
|||
|
|
}
|
|||
|
|
$.ajax({
|
|||
|
|
url:"/k/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 content = '<div style="padding:20px;">';
|
|||
|
|
content += '<p>成功上传：' + req.data.success + '个文件</p>';
|
|||
|
|
if (req.data.error_data && req.data.error_data.length > 0) {
|
|||
|
|
content += '<p>失败文件：</p><ul style="margin-left:20px;">';
|
|||
|
|
req.data.error_data.forEach(function(item) {
|
|||
|
|
content += '<li>' + item.pic_name + ' (' + item.error_msg + ')</li>';
|
|||
|
|
});
|
|||
|
|
content += '</ul>';
|
|||
|
|
}
|
|||
|
|
content += '</div>';
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '上传结果',
|
|||
|
|
area: ['500px', '300px'], // 宽高
|
|||
|
|
content: content,
|
|||
|
|
btn: ['确定'],
|
|||
|
|
yes: function(index, layero) {
|
|||
|
|
window.location.reload();
|
|||
|
|
},
|
|||
|
|
cancel: function() {
|
|||
|
|
window.location.reload(); // 点击右上角关闭也刷新
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}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>
|