develop
/
local-face-app
12
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
go语言写的人脸本地化程序
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
6 Commits
1 Branch
2.1 MiB
 
 
 
 
 
Branch: main
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de main
${ noResults }
local-face-app/templates/reg.html

394 linhas
10 KiB
Original Link permanente Anotar Histórico 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.   <meta charset="UTF-8">

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.   <title>注册页面</title>

  7.   <style>

  8.     body{

  9.       margin: 0;

  10.     }

  11.     li {

  12.       list-style-type: none;

  13.     }

  14.     @media screen and (orientation: portrait) {

  15.     .login {

  16.       width: 100vw;

  17.       height: 100vh;

  18.       background-image: url("/static/img/phoneBgc.jpg");

  19.       background-size: 100% 100%;

  20.       background-repeat: no-repeat;

  21.     }

  22.     .register {

  23.       background-image: url("/static/img/registerBgc.jpg") !important;

  24.       padding-top: 15vh;

  25.     }

  26. 

  27.     .register_loginTitle {

  28.       width: 100vw;

  29.       font-size: 8vw;

  30.       text-align: center;

  31.     }

  32.     .register_inputBox {

  33.       display: flex;

  34.       flex-direction: column;

  35.       justify-content: center;

  36.       align-items: center;

  37.       margin-top: 5vh;

  38.       position: relative;

  39.     }

  40.     .register_phoneInput {

  41.       width: 50vw;

  42.       height: 5vh;

  43.       border-radius: 2vw;

  44.       background-color: transparent;

  45.       font-size: 3vw;

  46.       padding-left: 2vw;

  47.       border: 1px solid #000;

  48.       margin-bottom: 2vh;

  49.     }

  50. 

  51.     .register_nameInput {

  52.       width: 50vw;

  53.       height: 5vh;

  54.       border-radius: 2vw;

  55.       background-color: transparent;

  56.       font-size: 3vw;

  57.       padding-left: 2vw;

  58.       border: 1px solid #000;

  59.       margin-bottom: 2vh;

  60.     }

  61.     .reg_button {

  62.       width: 40vw;

  63.       height: 5vh;

  64.       background-color: rgb(101, 161, 255);

  65.       border-radius: 10vw;

  66.       display: flex;

  67.       justify-content: center;

  68.       align-items: center;

  69.       color:#fff;

  70.       font-size: 4vw;

  71.       margin: 2vh 0  0 30vw;

  72.     }

  73.     .register_loginButton {

  74.       width: 40vw;

  75.       height: 5vh;

  76.       background-color: rgb(101, 161, 255);

  77.       border-radius: 10vw;

  78.       display: flex;

  79.       justify-content: center;

  80.       align-items: center;

  81.       color:#fff;

  82.       font-size: 4vw;

  83.       margin: 2vh 0  0 30vw;

  84.     }

  85. 

  86.     #scroll-to-top-btn {

  87.       display: none;

  88.       position: fixed;

  89.       right: 20px;

  90.       bottom: 20px;

  91.       width: 7vw;

  92.       height: 10vh;

  93.       color: #fff;

  94.       border: none;

  95.       border-radius: 5px;

  96.       font-size: 3vw;

  97.       cursor: pointer;

  98.     }

  99.       .uploadImg{

  100.         width: 46vw !important;

  101.         transform: translate(0%, 0%) !important;

  102.         left: 27vw !important;

  103.         position: relative;

  104.       }

  105.       #div-a-login{

  106.         margin-top: 3vh;

  107.         text-align: center;

  108.       }

  109.   }

  110. @media screen and (orientation: landscape) {

  111.   input:focus {

  112.       border: 0.1vw solid #000;

  113.       outline: none; /* 可选，用于去除默认的外边框样式 */

  114.   }

  115.   .login {

  116.       width: 100vw;

  117.       height: 100vh;

  118.       background-image: url("/static/img/phoneBgc_pc.jpg");

  119.       background-size: 100% 100%;

  120.       background-repeat: no-repeat;

  121.       position: relative;

  122.     }

  123.     .register {

  124.       background-image: url("/static/img/registerBgc_pc.jpg") !important;

  125.     }

  126.     .register_loginTitle {

  127.       width: 100vw;

  128.       display: flex;

  129.       justify-content: center;

  130.       font-size: 4vh;

  131.       text-align: center;

  132.       position: absolute;

  133.       z-index: 10;

  134.       top: 10vh;

  135.     }

  136.     .uploadImg {

  137.       width: 15vw;

  138.     }

  139.     .register_inputBox {

  140.       width: 100vw;

  141.       display: flex;

  142.       flex-direction: column;

  143.       justify-content: center;

  144.       align-items: center;

  145.       position: relative;

  146.       padding-top: 42vh;

  147.     }

  148.     .register_phoneInput {

  149.       width: 37vh;

  150.       height: 6vh;

  151.       border-radius: 2vh;

  152.       background-color: transparent;

  153.       font-size: 3vh;

  154.       border: 0.1vw solid #000;

  155.       margin-bottom: 5vh;

  156.       padding-left:1vw ;

  157.     }

  158.     .register_nameInput {

  159.       width: 37vh;

  160.       height: 6vh;

  161.       border-radius: 2vh;

  162.       background-color: transparent;

  163.       font-size: 3vh;

  164.       border: 0.1vw solid #000;

  165.       padding-left: 1vw ;

  166.       margin-bottom: 2vh;

  167.     }

  168.     .reg_button {

  169.       width: 16vw;

  170.       height: 3vw;

  171.       background-color: rgb(101, 161, 255);

  172.       border-radius: 10vh;

  173.       display: flex;

  174.       justify-content: center;

  175.       align-items: center;

  176.       color: #fff;

  177.       font-size: 2vw;

  178.       /* margin: 2vh 0 0 30vh; */

  179.       position: absolute;

  180.       left: 55vw;

  181.       top: 65vh;

  182.     }

  183.     .register_loginButton {

  184.       width: 8vw;

  185.       height: 2vw;

  186.       background-color: rgb(101, 161, 255);

  187.       border-radius: 1vw;

  188.       display: flex;

  189.       justify-content: center;

  190.       align-items: center;

  191.       color: #fff;

  192.       font-size: 3vh;

  193.       position: absolute;

  194.       left: 46vw;

  195.       top: 65vh;

  196.     }

  197. 

  198.     .hand:hover{

  199.        cursor: pointer;

  200.     }

  201. 

  202.     #scroll-to-top-btn {

  203.       display: none;

  204.       position: fixed;

  205.       right: 20px;

  206.       bottom: 20px;

  207.       width: 7vh;

  208.       height: 10vw;

  209.       color: #fff;

  210.       border: none;

  211.       border-radius: 5px;

  212.       font-size: 3vh;

  213.       cursor: pointer;

  214.     }

  215. 

  216.   .uploadImg{

  217.     width: 200px !important;

  218.     transform: translate(0%, 0%) !important;

  219.     left: 2vw !important;

  220.     position: relative;

  221.   }

  222. 

  223.   #div-a-login{

  224.     margin-top: 10vh;

  225.     text-align: center;

  226.     font-size: 3vh;

  227.   }

  228.   }

  229. 

  230. 

  231.     .upload-img-box {

  232.       position: relative;

  233.     }

  234. 

  235.     .upload-img-box .input-box {

  236.       display: inline-block;

  237.       width: 144px;

  238.       height: 144px;

  239.       /*border: solid black 1px;*/

  240.     }

  241. 

  242.     .upload-img-box .befor-img {

  243.       display: flex;

  244.       /*width: 300px;*/

  245.       /*height: 90px;*/

  246.       /*border: solid black 1px;*/

  247.       position: absolute;

  248.       top: 0px;

  249.       left: 0px;

  250.       /*background: #ffffff;*/

  251.       z-index: 30;

  252.       align-items: center;

  253.       justify-content: center;

  254.     }

  255. 

  256.     .upload-img-box .befor-img.hasImg {

  257.       display: none;

  258.     }

  259. 

  260.     .upload-img-box .after-img {

  261.       display: inline-block;

  262.       width: 144px;

  263.       height: 144px;

  264.       border: none;

  265.       /*position: absolute;*/

  266.       top: 0px;

  267.       left: 0px;

  268.       /*background: #ffffff;*/

  269.       z-index: 20;

  270.     }

  271. 

  272.     .after-img img, .uploadImg {

  273.       /*position: absolute;*/

  274.       width: 100%;

  275.       height: 100%;

  276.       object-fit: cover; /*根据父容器的尺寸裁剪和缩放图片，以填充整个容器，并保持长宽比例不变。*/

  277.       object-position: center; /*指定对象的位置，如果不设置，则默认是center*/

  278.       background-size: cover; /*背景图片的大小，如果不设置，则默认是auto*/

  279.       background-position: center;

  280.       top: 50%;

  281.       left: 50%;

  282.       transform: translate(-50%, 0%);/*将元素移动到中心*/

  283.       border-radius: 50%;

  284.     }

  285.   </style>

  286. </head>

  287. <body>

  288.   <!-- 注册页面 -->

  289.   <div class="register login">

  290.     <div class="register_loginTitle ">

  291.       <div class="upload-img-box">

  292.         <div class="input-box">

  293.           <input type="file" id="img-file" hidden="hidden" name="选择图片">

  294.         </div>

  295.         <div class="befor-img">

  296.           <img class="uploadImg hand" src="/static/img/upload.png" alt="">

  297.         </div>

  298.         <div class="after-img">

  299.           <img id="img-box" src="" width="30%" height="auto">

  300.         </div>

  301.       </div>

  302. 

  303.     </div>

  304.     <div class="register_inputBox">

  305.       <input class="register_nameInput" name="staffName" type="text" placeholder="员工姓名">

  306.       <input class="register_phoneInput" name="staffPhone" type="text" placeholder="员工手机号">

  307.     </div>

  308.     <div class="register_loginButton hand">注册人脸</div>

  309.     <div id="div-a-login"><a id="a-login" href="/">去登录</a></div>

  310.   </div>

  311.   <script src="/static/js/jquery.min.js"></script>

  312.   <script src="/static/js/msg-box.js"></script>

  313.   <script>

  314.     $(function(){

  315. 

  316.       $(".register_loginButton").on("click",function() {

  317. 

  318.         var staffPhone = $(".register_phoneInput").val();

  319.         var staffName = $(".register_nameInput").val();

  320.         const regex = /^1[3-9]\d{9}$/;

  321.         if (staffPhone == "" || !regex.test(staffPhone)){

  322.           $.MsgBox.Alert("提示", "手机号为空或不合法，请检查");

  323.           return;

  324.         }

  325.         if (staffName == ""){

  326.           $.MsgBox.Alert("提示", "员工姓名为空，请检查");

  327.           return;

  328.         }

  329. 

  330.         var img = $("#img-box").attr("src");

  331.         console.log(img);

  332.         $.ajax({

  333.           url: "/register",

  334.           type: "post",

  335.           data: {

  336.             staffPhone: staffPhone,

  337.             staffName: staffName,

  338.             avatar: img

  339.           },

  340.           success: function(data) {

  341.               $.MsgBox.Alert("提示", data.Message);

  342.           },

  343.           error: function(error) {

  344.             console.log(error);

  345.             $.MsgBox.Alert("提示", error.responseJSON.Message);

  346.           }

  347.         })

  348. 

  349.       })

  350. 

  351.       $(document).on("click", ".upload-img-box .befor-img,.upload-img-box .after-img", function (e) {

  352.         $(".input-box input").trigger("click");

  353.       })

  354.       // 使用input 的change事件，监听当文件上传的值进行改变的时候，才触发事件。

  355.       $(document).on("change", ".upload-img-box #img-file", function () {

  356.         var file = $("#img-file")[0].files[0];

  357.         console.log(file);

  358.         // file 内容包括： lastModified , lastModifiedDate , name , size , type

  359.         var formdata = new FormData();

  360.         formdata.append('file', file);

  361. 

  362.         if (window.FileReader) {

  363.           var fr = new FileReader();

  364.           fr.onloadend = function (e) {

  365.             //                console.log(this.result);

  366.             // document.getElementById("portrait").src = e.target.result;

  367.             $("#img-box").attr("src",e.target.result)

  368.             $(".upload-img-box .befor-img").addClass("hasImg")

  369.           };

  370.           //给FileReader对象一个读取完成的方法,

  371.           //使用readAsDataURL会返回一个url

  372.           //这个值就保存在事件对象的result里

  373.           //img通过加载这个地址,完成图片的加载

  374.           fr.readAsDataURL(file);

  375.         }

  376. 

  377.         //判断图片大小

  378.         if (file.size > 3 * 1024 * 1024) {

  379.           alert("上传图片不能大于3M");

  380.         }

  381. 

  382.         //判断图片数据类型

  383.         if (!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(file.name)) {

  384. 

  385.           alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");

  386.         }

  387.       })

  388.     })

  389. 

  390. 

  391. 

  392.   </script>

  393. </body>

  394. </html>