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

layui修改头像功能相关推荐

minio服务器在win10的上传与下载，以及修改头像Minio速看免费本地文件服务器
首先自己配置Minio服务器和客户端请点击官网地址http://www.minio.org.cn 安装完成后自己百度win10安装. 我是用Spring boot 配置首先导入 Minio D ...
android 仿qq修改头像,Qt:小项目仿QQ修改头像界面，技术点记录
最近写了一个修改头像功能的UI,布局参考了QQ目前的修改头像界面.如下图这里主要说明一下两个地方的技术:1.头像图片上层的遮罩层,圆形外部为灰色,内部为全透明:2.上传图片宽高比例可以通过鼠标拖拽移 ...
【el-upload实现一个修改头像的功能】
el-upload实现一个修改头像的功能效果代码效果代码 <el-row type="flex" style="margin-top: 1%;margin- ...
php修改头像怎么做,PHP - 点击更换头像
原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: 头像: 子页面代码(弹出窗体页面): 请选择头像: echo ""; } ...
升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
android 仿微信demo————注册功能完善添加头像功能（服务端）
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
Spring Boot 项目如何实现上传头像功能？
目录设计思路效果展示编辑分析前后端交互接口请求响应代码实现和详细注释数据库设计自定义资源映射前后端交互客户端开发服务器开发设计思路效果展示分析实现这个功能只要弄清楚 ...
servlet修改用户头像_修改头像总结
1,背景博客停了好久,主要是最近工作太忙了,还有就是身体状况没有以前那么好了,乘着国庆长假的空档,写下这篇一直想写的文章. 运营平台是我主要致力的一个项目,这个项目分为四个大部分,个人中心,充值中心 ...
在项目中使用 Discuz!NT的上传头像功能
大概半年前,由于某个网站项目需要整合Discuz!NT,就粗略的用了一下.觉得里面的会员上传头像功能方便好用,而且支持摄像头,就把它的代码分离出来,以后用在需要的地方. 用过Discuz!NT的朋友会 ...
两种方法为WordPress添加用户自定义头像功能
一般情况下,WordPress默认都是使用Gravatar头像,如果用户没有注册过Gravatar头像,那就使用网站设置的默认头像,这样用户体验不是很好:再则,如果直接调用远程Gravatar头像,还 ...

layui修改头像功能

前言

代码

layui修改头像功能相关推荐

最新文章

热门文章