整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5实现头像的上传

TML5实现头像的上传

这是利用form-data给后台传输数据,来实现头像的上传加载!

  1. html代码
<!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>
  1. 样式代码
 .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%;
        }
  1. javescript代码


上有很多的理由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、所有软件和资源都有时效性,如果遇到失效的请下载其他软件代替!