layui修改头像功能-蒲公英云

layui修改头像功能

梦里梦外; 2023-07-24 02:22 74阅读 0赞

前言

场景大概是用户点击修改头像，会显示一个弹出框，展示当前系统所有图片，用户选择了一张之后，就会覆盖原有的那一张，注意，不能照搬，要自己调试修改的，因为每个公司重新都封装了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);
}