提交

css/user/adminuser.css

@@ -14,20 +14,6 @@
 .layui-body .main .layui-body .main .layui-table-view {
   margin: 10px 0 0px;
 }
-.layui-body .main #popUpdateTest .img-box {
-  display: block;
-  height: 100px;
-  position: relative;
-}
-.layui-body .main #popUpdateTest .img-box > img {
-  width: 100px;
-}
-.layui-body .main #popUpdateTest .img-box #chooseImage {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
 .layui-body .main .searchbox {
   width: 100%;
   white-space: nowrap;
@@ -35,16 +21,21 @@
 .layui-body .main .searchbox .searchname {
   margin-left: 5px;
 }
-.layui-body .img-box {
+.layui-body .layui-input-block {
+  position: relative;
+}
+.layui-body .layui-input-block .img-box {
   display: block;
-  width: 100px;
+  width: 30%;
   height: 100px;
   position: relative;
+  overflow: hidden;
 }
-.layui-body .img-box > img {
+.layui-body .layui-input-block .img-box > img {
   max-width: 100%;
+  max-height: 100%;
 }
-.layui-body .img-box #chooseImage {
+.layui-body .layui-input-block #chooseImage {
   position: absolute;
   width: 100%;
   height: 100%;

css/user/adminuser.less

@@ -17,22 +17,6 @@
         .layui-body .main .layui-table, .layui-body .main .layui-table-view{
             margin: 10px 0 0px;
         }
-        #popUpdateTest{
-            .img-box{
-                display: block;
-                height: 100px;
-                position: relative;
-                &>img{
-                    width: 100px;
-                }
-                #chooseImage{
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    display:none;
-                }
-            }
-        }
         .searchbox{
             width: 100%;
             white-space: nowrap;
@@ -41,13 +25,18 @@
             }
         }
     }
-    .img-box{
-        display: block;
-        width: 100px;
-        height: 100px;
+    .layui-input-block{
         position: relative;
-        &>img{
-            max-width: 100%;
+        .img-box{
+            display: block;
+            width:30%;
+            height: 100px;
+            position: relative;
+            overflow: hidden;
+            &>img{
+                max-width: 100%;
+                max-height: 100%;
+            }
         }
         #chooseImage{
             position: absolute;

js/common.js

@@ -88,4 +88,58 @@ function dealImage(path, obj, callback) {
       // 回调函数返回base64的值
       callback(base64);
   }
-}
+}
+// 修改个人信息
+function showImg() {
+  layer.open({
+      type: 1,
+      title: "编辑个人信息",
+      area: ['420px', '320px'],
+      shade: 0, 
+      content: $("#popUpdate"),//引用的弹出层的页面层的方式加载修改界面表单
+      success: function (layero, index) {
+          //表单初始赋值
+          // form.val('modeformData', data)
+          // $("#oldhead").attr('src', data.logo)
+      },
+      cancel: function(){ //点击取消
+          $("#popUpdate").hide()
+          layer.closeAll()
+      }
+  });
+}
+
+layui.use('form', function () {
+  var form = layui.form;
+  form.on('submit(modebtn)', function (data) {
+      var uregs = /^[a-zA-Z0-9]{4,12}$/
+      if(data.field.nickname.length < 4 || data.field.nickname.length > 12) {
+          layer.tips('请输入正确的昵称格式',$("#modenickname"),{
+              tips: [3, '#0FA6D8']
+          });
+          $("#nickname").focus();
+          return false;
+      }
+      if(!uregs.test(data.field.password)) {
+          layer.tips('请输入正确的密码格式',$("#modepassword"),{
+              tips: [3, '#0FA6D8']
+          });
+          $("#password").focus();
+          return false;
+      }
+      
+      $.ajax({
+          type:'post',
+          url:'',
+          dataType:'json',
+          data:JSON.stringify(data.field),
+          success:function(res) {
+              if(res.code == 0) {
+                  layer.msg('创建成功',{icon: 6});
+              }else{
+                  layer.msg("网络错误，请稍后再试", {icon: 5});
+              }
+          }
+      })
+  });
+});

page/user/adminadd.html

@@ -28,7 +28,7 @@
                     </a>
                     <dl class="layui-nav-child">
                         <dd>
-                            <a href="">基本资料</a>
+                            <a href="javascript:void(0)" onclick="showImg()">基本资料</a>
                         </dd>
                         <dd>
                             <a href="">安全设置</a>
@@ -40,6 +40,36 @@
                 </li>
             </ul>
         </div>
+        <div class="layui-row" id="popUpdate" style="display:none;">
+            <div class="layui-col-md10">
+                <form class="layui-form layui-from-pane" lay-filter="modeformData" style="margin-top:20px">
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">账号</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="name" id="modename" readonly autocomplete="off" placeholder="请输入账号" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">昵称</label>
+                        <div class="layui-input-block">
+                            <input type="text" id="modenickname" name="nickname" required lay-verify="required" autocomplete="off" placeholder="请输入昵称" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">密码</label>
+                        <div class="layui-input-block">
+                            <input type="password" name="password" id="modepassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item" style="margin-top:40px">
+                        <div class="layui-input-block">
+                            <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="modebtn">确认修改</button>
+                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
 
         <div class="layui-side layui-side-menu">
             <div class="layui-side-scroll">
@@ -249,10 +279,11 @@
                             <div class="layui-form-item layui-form-text">
                                 <label class="layui-form-label">头像</label>
                                 <div class="layui-input-block">
+                                    <input type="file" id="chooseImage" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="filechange(event)" />
                                     <span class="img-box" id="img-box">
-                                        <input type="file" id="chooseImage" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="filechange(event)" />
                                         <img src="../../img/upload.png" id="img-pre" alt="">
                                     </span>
+                                    <input type="hidden" id="url" name="url" value="/upload/compression/20200423/e83a5865-5fed-4c9f-bf28-d20d807173cf.jpeg">
                                 </div>
                             </div>
                             <div class="layui-form-item">
@@ -308,7 +339,7 @@
         layui.use(['element'], function () {
             var element = layui.element;
         });
-        $("#img-pre").click(function () {
+        $("#img-box").click(function () {
             $("#chooseImage").click();
         })
         function filechange(obj) {
@@ -331,18 +362,16 @@
                     $("#img-pre").attr("src",base);
                     base64Upload(base)
                 });
+               
             }
         }
         //上传base64图片
         function base64Upload(img) {
             var formData = new FormData();
             formData.append('base64string',img);
-            if(getUrlParam('id')) { //判断是新增还是修改
-                formData.append('id',getUrlParam('id'));
-            }
             $.ajax({
                 type:'post',
-                url: '', //接受图片的地址
+                url: 'http://192.168.2.161/File/UploadImgBase64', //接受图片的地址
                 data: formData,
                 processData: false,
                 cache: false,
@@ -350,7 +379,8 @@
                 success:function(res){
                     var res = JSON.parse(res);
                     if (res.code == 0) {
-                        layer.msg("上传成功", {icon: 6});
+                        $("#url").val(res.data[0].url) //保存图片地址
+                        // layer.msg("上传成功", {icon: 6});
                     } else {
                         layer.msg('上传失败',{time: 1500});
                     }
@@ -388,6 +418,9 @@
                     $("#nickname").focus();
                     return false;
                 }
+                if(getUrlParam('id')) {
+                    data.field.id = getUrlParam('id')
+                }
                 $.ajax({
                     type:'post',
                     url:'',

page/user/adminlist.html

@@ -230,7 +230,7 @@
                     </div>
                     <div class="main">
                         <div class="searchbox">
-                            <a href="./adminadd.html" class="layui-btn" id="uploadbtn"><i class="layui-icon"></i>新增</a>
+                            <a href="./adminadd.html" class="layui-btn"><i class="layui-icon"></i>新增</a>
                             <span class="searchname">账号：</span>
                             <div class="layui-inline">
                               <input class="layui-input" name="restname" id="restname" autocomplete="off">
@@ -253,7 +253,7 @@
                             <div class="layui-inline">
                                 <input type="text" class="layui-input" readonly id="createtime">
                             </div>
-                            <button class="layui-btn" data-type="reload">搜索</button>
+                            <button class="layui-btn" data-type="reload" id="searchbtn">搜索</button>
                         </div>
                         <table class="layui-hide" id="tables" lay-filter="tables"></table>
                         <script type="text/html" id="bar">
@@ -310,9 +310,9 @@
             </div>
         </div>
     </div>
+    <script src="../../layui/layui.js"></script>
     <script src="../../js/jquery.js"></script>
     <script src="../../js/common.js"></script>
-    <script src="../../layui/layui.js"></script>
     <script type="text/javascript">
         layui.use(['element'], function () {
             var element = layui.element;
@@ -726,7 +726,7 @@
                 id: 'searchReload',
                 height:'full-175'
             })
-            $('.searchbox .layui-btn').on('click', function(){
+            $('#searchbtn').on('click', function(){
                 var name = $.trim($('#restname').val());
                 var nickname = $.trim($('#restnickname').val());
                 var role = $.trim($('#restrole').val());

page/user/demod.html

@@ -596,6 +596,70 @@
             }
         }
 
+
+
+    //     <img id="articleImg" width="180" height="100">
+    // 　　<input type="file" value="上传" id="articleImg
+            $('#articleImgBtn').change(function(){
+                        run(this, function (data) {  
+                            uploadImage(data);
+                        });  
+                    });
+
+                    function run(input_file, get_data) {  
+                        /*input_file：文件按钮对象*/  
+                        /*get_data: 转换成功后执行的方法*/  
+                        if (typeof (FileReader) === 'undefined') {  
+                            alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");  
+                        } else {  
+                            try {  
+                                /*图片转Base64 核心代码*/  
+                                var file = input_file.files[0];  
+                                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
+                                if (!/image\/\w+/.test(file.type)) {  
+                                    alert("请确保文件为图像类型");  
+                                    return false;  
+                                }  
+                                var reader = new FileReader();  
+                                reader.onload = function () {  
+                                    get_data(this.result);  
+                                }  
+                                reader.readAsDataURL(file);  
+                            } catch (e) {  
+                                alert('图片转Base64出错啦！' + e.toString())  
+                            }  
+                        }  
+                    }  
+          
+        function uploadImage(img) {
+            //判断是否有选择上传文件
+                var imgPath = $("#articleImgBtn").val();
+                if (imgPath == "") {
+                    alert("请选择上传图片！");
+                    return;
+                }
+                //判断上传文件的后缀名
+                var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
+                if (strExtension != 'jpg' && strExtension != 'gif'
+                && strExtension != 'png' && strExtension != 'bmp') {
+                    alert("请选择图片文件");
+                    return;
+                }
+                $.ajax({
+                    type: "POST",
+                    url:'上传图片接口',
+                    data: { token: token,file: img.substr(img.indexOf(',') + 1)},    //视情况将base64的前面字符串data:image/png;base64,删除
+                    cache: false,
+                    success: function(data) {
+                        alert("上传成功");
+                        $("#articleImg").attr('src', JSON.parse(data).imageUrl);
+                    },
+                    error: function(XMLHttpRequest, textStatus, errorThrown) {
+                        alert("上传失败，请检查网络后重试");
+                    }
+                });
+            }
+
     </script>
 </body>