layui修改頭像功能

前言

場景大概是用戶點擊修改頭像，會顯示一個彈出框，展示當前系統所有圖片，用戶選擇了一張之後，就會覆蓋原有的那一張，注意，不能照搬，要自己調試修改的，因爲每個公司重新都封裝了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);
}