layui修改头像功能

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

## 前言 ##

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

## 代码 ##

`HTML部分代码`

`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);
    }