场景:在文章编辑页面中点击插入图片按钮,弹出新窗口,完成选择后再获取选定的图片 主窗口:
{extend name="base/base" /}
{block name="main"}
<form id="form" method="post" class="layui-form layui-form-pane" action="{:url('/admin/article_change')}">
<div class="layui-form-item">
<label class="layui-form-label">所属层级</label>
<div class="layui-input-block" style="width:92%; position: absolute;z-index: 9999;">
<select name="cate_id" id="cate_id">
<option value="0">请选择分类</option>
{volist name="list" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文章标题</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input"
value="{:isset($data.title)?$data.title:''}" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图片上传</label>
<div class="layui-input-block">
<input type="text" id="img" name="img" placeholder="请选择图片" autocomplete="off" class="layui-input"
value="{:isset($data.img)?$data.img:''}" lay-verify="required" style="width: 90%; float: left;">
<a class="layui-btn" style="float: left;" href="javascript:;" onclick="upload(this, 1)">选择图片</a>
</div>
</div>
<div class="layui-form-item" id="container">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<textarea class="layui-textarea" id="content" name="content" style="width: 100%;">{:isset($data.content)? $data.content:""}</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="hidden" name="id" id="id" value="{:isset($data.id)?$data.id:''}">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
{/block}
{block name="script"}
<!-- 配置文件 -->
<script type="text/javascript" src="/static/uedit/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/uedit/ueditor.all.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('content');
</script>
<script>
layui.use(['form', 'jquery', 'layer'], function () {
var form = layui.form, $ = layui.jquery, layer = layui.layer;
let cate_id = '{:isset($data.cate_id)?$data.cate_id:""}';
if (id) {
$('#cate_id').val(cate_id);
form.render();
}
//表单提交
form.on("submit(*)", function (data) {
$.post(data.form.action, data.field, function (data) {
if (data.code) {
layer.msg(data.msg, {icon:1, time:1000});
setTimeout(function () {
parent.location.reload();
},1000);
} else {
layer.ms('操作失败', {icon:2, time:1000});
}
});
return false;
});
});
//这里是open操作,重点全在这里,其实很简单用过一次就明白了
function upload(obj, type) {
layui.use(['layer', 'jquery'], function () {
var layer = layui.layer, $ = layui.jquery;
layer.open({
type: 2,
area: ['700px', '500px'],
content: '/admin/get_file.html',
btn: ['选择', '取消'],
yes: function (index, layero) {
$('#img').val(layero.find('iframe').contents().find("#selected_img").val());//在回调触发后找到子窗口中的input并取值
layer.close(index);
},
btn2: function (index, layero) {
layer.close(index);
},
success: function (layero, index) {
//设置子窗口 图片选择数量
layero.find('iframe').contents().find("#select_limit").val(1);
}
});
});
}
</script>
{/block}
子窗口:子窗口就是正常的操作,没什么特别的
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="IE=edge,chrome=1" />
<title>上传</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<style type="text/css">
#list{overflow: hidden;padding: 10px 0;}
#list .empty {line-height:150px;text-align:center;color:#999;}
#list .item {width: 120px;margin:10px;float: left;position: relative;}
#list .item .image{background-size:cover;background-repeat: no-repeat;width: 120px;height: 120px;border: 1px solid #EEE;position:relative;background-position:center;}
#list .item .image .checked{position: absolute;display: none;right: 0;bottom: 0;border: 14px solid #07d;border-left-color: transparent;border-top-color: transparent;}
#list .item .image .checked i{color: #FFF;font-size: 14px;right: -14px;top: -2px;position: absolute;display: block;}
#list .item .name{text-align:center;height:20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:#999;}
#list .item.checked .image {border-color: #07d;}
#list .item.checked .image .checked{display:block;}
#list .item .action{text-align:center; margin-top: 5px;}
#list .item .action a{color:#999;}
#pageContainer{padding:0 0 50px 210px;}
#pageContainer a{text-decoration:none;}
#pageContainer #pageLeft{width:200px;float:left;margin:0 0 0 -210px;border-radius:3px;}
#categoryMenu{padding:10px;background:#EEE;height:40px;box-sizing:border-box;}
#categoryMenu a{display:inline-block;width:30%;text-align:center;color:#999;}
#categoryMenu a.enable{color:#bd2326;}
#categoryTree{padding:10px 0;margin:0;}
#categoryTree ul{padding:0;}
#categoryTree a:hover{text-decoration:none;}
#categoryTree a.selected{color:#bd2326;}
#pageContainer #pageRight{border-radius:3px;}
#contentHead{padding:5px 10px;background:#FFF;border-bottom:1px solid #EEE;height:40px;box-sizing:border-box;}
#imageUploadButton{width:100px;float:right;border-radius:4px;}
#contentTitle{line-height:30px;}
#contentTitle a{display:inline-block;margin:0 0 0 10px;font-size:12px;color:#999;}
#contentTitle a.enable{color:#bd2326;}
.image-this{border: 1px solid #24a886!important;position: relative}
.image-this:before{content: "";background: url("/static/plug/file/img/image-this.png");width: 20px;height: 20px;position: absolute; right: 0; bottom: 0}
#_frameBox {padding:10px;background: #FFF;font-size: 13px;}
#_frameTool {position: fixed;bottom: 0;left: 0;right: 0;background: #FFF;border-top: 1px solid #CCC;padding: 10px;text-align: right;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:100%;z-index:9999;}
.layui-nav-tree .layui-nav-child a{color: #999;}
.layui-nav-tree .layui-nav-item a{color: #777!important;}
.layui-nav-tree .layui-nav-bar{display: none}
.layui-nav-itemed > a{background: #eee;}
.layui-nav-itemed .layui-nav-more{border-color: transparent transparent #333;border-bottom-color: rgba(0,0,0,1);border-top-color: rgba(0,0,0,0)!important;}
.layui-nav-item .layui-nav-more{border-top-color: rgba(0,0,0,1)}
.layui-nav-tree .layui-nav-item a:hover,.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover{background: #eee; color: #333!important;}
.layui-nav-itemed .layui-nav-child,.layui-nav{background: #fafafa!important;}
.wjj{background: url("/static/plug/file/img/wjj.png") no-repeat center; background-size: 16px; width: 20px; height: 40px; margin-right: 2px; display: inline-block; vertical-align: top;}
.layui-nav .layui-nav-item a{padding: 0 10px;}
.back{border-bottom: 1px solid #ebebeb;}
.back i{width:20px; display: inline-block;text-align: center; font-size: 14px; margin-right: 2px;}
.active{border:1px solid #24a886!important;position: relative}
.active:before{position:absolute;right: 0;bottom: 0;width: 0;height: 0;color: #fff; font-size: 16px;text-align: center; content: "\e605";font-family: layui-icon!important;line-height: 20px; border-top: 20px solid rgba(255,255,255,0);border-right: 20px solid #24a886;border-bottom: 20px solid #24a886;border-left: 20px solid rgba(255,255,255,0);}
</style>
</head>
<body>
<div>
<!--内容-->
<div id="pageContainer" style="overflow: hidden">
<!--左侧-->
<div id="pageLeft">
<!--操作-->
<div id="categoryMenu">
<a href="javascript:;" onclick="createCategory()"><i class="layui-icon"></i> 新建</a>
<a href="javascript:;"><i class="layui-icon"></i> 修改</a>
<a href="javascript:;"><i class="layui-icon"></i> 删除</a>
</div>
<!--列表-->
<ul class="layui-nav layui-nav-tree layui-inline" style="margin-right: 10px;">
<li class="layui-nav-item layui-nav-itemed">
<dl class="layui-nav-child">
<dd class="back">
{if $prevPath == '' or $prevPath == '/'}
<a href="/admin/get_file.html"><i class="layui-icon"></i>返回上一级</a>
{else}
<a href="/admin/get_file.html?path={$prevPath}"><i class="layui-icon"></i>返回上一级</a>
{/if}
</dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<dl class="layui-nav-child" id="dirs">
{volist name="dirList" id="v"}
<dd><a href="/admin/get_file.html?path={$virtualPath}/{$v}"><i class="wjj"></i>{$v}</a></dd>
{/volist}
</dl>
</li>
</ul>
</div>
<!--右侧-->
<div id="pageRight">
<!--操作-->
<div id="contentHead">
<!--上传按钮-->
<div id="imageUploadButton">
<button type="button" class="layui-btn" id="upload" style="height: 30px; line-height: 30px; width: 100px;">上传图片</button>
</div>
<div id="contentTitle">
图片列表
<a href="javascript:;"><i class="layui-icon"></i>删除</a>
</div>
</div>
<!--内容1-->
<div id="contentBody">
<div id="list">
<!--图1-->
{volist name="fileList" id="v"}
<div class="item">
<div class="image" style="background-image:url(/uploads/{$virtualPath}/{$v});" path="/uploads/{$virtualPath}{$v}" onclick="selection(this)">
<div class="checked">
<i class="layui-icon">{$v}</i>
</div>
</div>
<!--眼图标-可点击-->
<div class="action">
<a href="/uploads/{$currentPath}/{$v}" target="_blank" title="查看大图">
<span class="layui-icon"></span>
</a>
</div>
</div>
{/volist}
</div>
</div>
</div>
</div>
</div>
<div id="_frameTool">
<input type="hidden" id="virtualPath" value="{$virtualPath}">
<!--<a href="javascript:;" class="layui-btn" onclick="releaseBtn();">确定</a>-->
<!--<a href="javascript:;" id="closeBTN" class="layui-btn layui-btn-primary">关闭</a>-->
</div>
<!--分类弹框-->
<div id="category" style="display: none;">
<div style="overflow: hidden; padding: 20px;">
<span style="height: 38px; line-height: 38px; float: left; width: 20%;">名称:</span>
<input type="text" class="layui-input" style="width: 76%; float: left;">
</div>
<div style="margin-top: 1px; padding: 0 20px; height: 50px; line-height: 50px; background: #eee;">
<button class="layui-btn" style="height: 30px; line-height: 30px;">添加</button>
</div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<input id="selected_img" type="hidden" value="">
<input id="select_limit" type="hidden" value="0">
<script>
function selection(obj) {
layui.use(['jquery', 'layer'], function () {
var $ = layui.jquery, layer = layui.layer;
if ($('#select_limit').val() == 1) {
$(obj).addClass('active');
let img = $(obj).attr('path');
img = img.replace(/\/\//,'/');
$('#selected_img').val(img);
} else {
}
});
}
</script>
</body>
</html>
代码有点乱,其实比较重要的就在主窗口 upload 方法中
本文介绍 layui.open 如何实现子窗口与主窗口的数据传递。重点在于理解在主窗口中如何通过 upload 方法处理子窗口的数据。
7178

被折叠的 条评论
为什么被折叠?



