前言
场景大概是用户点击修改头像,会显示一个弹出框,展示当前系统所有图片,用户选择了一张之后,就会覆盖原有的那一张,注意,不能照搬,要自己调试修改的,因为每个公司重新都封装了layui
代码
HTML部分代码
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<i class="fa fa-plus"></i> <span onclick="getHeaders()" style="color: red">修改头像</span> <i class="fa fa-close"></i>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div id="headerImgShow"><img src="${defaultSetting.url}" style="width: 50px;height: 50px"></div>
</div>
</div>
<div id="headerImg"></div>
JS部分代码
ajax请求的封装自己修改
var fileIndex
function getHeaders () {
//提交信息
var ajax = new $ax(Feng.ctxPath + "/header/getHeaders", function (data) {
var str = '';
for (let i =0 ;i< data.length;i++){
str += '<img src="'+data[i].url+'" width="100px" height="80px" style="padding-left: 10px" οnclick=img("'+ data[i].id+'","'+data[i].url+'") >';
}
$('#headerImg').hide();
$('#headerImg').html("");
$('#headerImg').append(str);
fileIndex = layer.open({
type: 1,
title: '选择图片',
area: ['600px', '360px'], //宽高
fix: false, //不固定
maxmin: true,
content: $('#headerImg')
});
}, function (data) {
Feng.error("请求失败!" + data.responseJSON.message + "!");
});
ajax.start();
};
function img(id,url){
$('#headerId').val(id);
$('#headerImgShow').html('<img src="'+url+'" width="50px" height="50px">');
layer.close(fileIndex);
}