<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<input enctype="multipart/form-data" type="file">
<input id="Susername" type="text" placeholder="用户名">
<input id="Ssex" type="number" placeholder="年龄">
<input id="Sage" type="text" placeholder="专业">
<input id="Smajor" type="text" placeholder="学校">
<input id="Sschool" type="text" placeholder="QQ">
<input id="Sqq" type="text" placeholder="地址">
<input id="Saddress" type="text" placeholder="座右铭">
<input id="Smotto" type="button" value="上传">
<div style="clear: both;"></div>
<progress value="0" max="100"></progress>
</div>
<div class="showarea">
<h3>显示区域</h3>
</div>
</body>
</html>
.container{
box-sizing: border-box;
width: 404px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding-top: 20px;
background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
margin: 0 auto;
}
input{
padding: 0;
margin: 0;
}
.container input[type=file]{
width: 300px;
height: 30px;
border: 1px solid #ccc;
background: #7FFFD4;
color: #133131;
float: left;
}
.container input[typr=button]{
width: 100px;
height: 32px;
float: left;
border: 1px solid #ccc;
color: #133131;
}
progress{
display: none;
width: 400px;
height: 30px;
margin-top: 7px;
}
.showarea{
width: 600px;
min-height: 200px;
border: 1px solid #ccc;
margin: 30px auto;
}
.showarea h3{
widows: 100px;
margin: 0 auto;
line-height: 60px;
text-align: center;
border-bottom: 1px solid #cccc;
color: #133131;
}
.showareaimg{
max-width: 1000%;
}
上有很多的理由cropper.js开发的h5图片上传,但是大都依赖bootstrap,需要引入他们的东西,感觉太重。另外由于phpcms v9后台修改flash上传为h5上传,唯独没有修改头像的上传,感觉不太完美,所以专门开发了一下h5头像上传,
具体修改方案参考:https://doc.tengcee.com/other/148.html,代码修改极少,php代码总共修改了5行,帮你快速搞定头像H5上传
目前是对接sso的上传,可以完美实现sso式保存头像
O.KM220112 -虎年头像生成
文章编辑:945KM 适用系统:WEB
头像!头像!该换头像了!!
01应用介绍
这是一个可以生成带“虎元素”的在线头像生成器,含25款虎年头像。
使用方法:打开网页—上传头像—选择喜欢的头像框(头像框通过拖拽可调整)—点击“保存头像”—手机端长按保存(电脑网页端鼠标右键保存)即可。
02应用地址
关注我,后台回复“头像”获取资源
免责声明
1、大部分资源来源于网络,仅供学习和交流使用,严禁商用,如有侵权请联系删除!
2、所有软件和资源都有时效性,如果遇到失效的请下载其他软件代替!
*请认真填写需求信息,我们会在24小时内与您取得联系。