博客后台管理员用户的个人信息管理 jquery ajax上传图片文件和数据

后台管理员用户的个人信息管理

这里需要实现的是管理员用户登录进入系统之后对自己的信息进行更改，这里也是基本的增、删、改、查操作唯一有区别的就是这里需要对管理员用户的头像进行上传，也就是需要实现图片的上传，因为之前写的不少，所以实现的时候我以为会比较简单，但是在实现中我这次用的是ajax提交，所以在传递数据时需要做特定处理，才能将图片传递到后端进行处理，下面的代码中我有详细注解：

1、show_info.ctp视图代码

<div style="margin-bottom: 5px">
    <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a><cite>个人信息管理</cite></a>
    </span>
</div>

<form class="layui-form" action="/admin/alertAdmin" id="form" enctype="multipart/form-data" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" value="<?=$admin_info['id']?>">
            <input type="text" value="<?=$admin_info['username']?>" id="username" name="username" lay-verify="required|username" lay-reqText="用户名不能为空" required placeholder="请输入用户名" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" id="phone" value="<?=$admin_info['phone']?>" lay-verify="required|phone" lay-reqText="手机号不能为空" required placeholder="请输入手机号" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" id="email" value="<?=$admin_info['email']?>" lay-verify="required|email" lay-reqText="邮箱不能为空" required placeholder="请输入邮箱" autocomplete="off" class="layui-input" >
        </div>
    </div>
<!--头像上传-->
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <input type="file" name="img" id="file"  onchange="changepic(this)">
        <img src="<?php echo $this->webroot; ?><?=$admin_info['image']?>"  id="img" style="margin-top:10px;width: 50px" accept="image/jpg,image/jpeg,image/png,image/PNG">
    </div>
    <button type="button" id="ajax_submit" class="layui-btn" style="margin-left: 100px">提交修改</button>
</form>

<script>
    //这里就是当你修改图片时会有一个预览的效果
    function changepic() {
        //读取文件内容
        var reads = new FileReader();
        //获取到上传文件的地址
        f = document.getElementById('file').files[0];
        //将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
        reads.readAsDataURL(f);
        //onload:文件读取成功时触发
        reads.onload = function(e) {
            //设置预览图片的地址
            document.getElementById('img').src = this.result;
            //展示该图片
            $("#img").css("display", "block");
        };
    }
    
    //ajax提交用户修改信息
    $('#ajax_submit').click(function () {
       	//初始化一个FormData对象
        var fd = new FormData();
        //获取到上传的图片文件
        var file_data = $('#file').prop('files')[0];
        //像FormData中添加数据
        fd.append('img',file_data);
        fd.append('id',$('#id').val());
        fd.append('username',$('#username').val());
        fd.append('email',$('#email').val());
        fd.append('phone',$('#phone').val());
		//ajax提交数据，这里不不用设置dataType 
        $.ajax({
            'url':'/admin/alertAdmin',
            'contentType': false,//jQuery不要去设置Content-Type请求头
            'processData': false,//jQuery不要去处理发送的数据
            'data':fd,
            'type':'post',
            'success':function (res) {
                if (res == 200){
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('修改成功！');
                    })
                }else {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.msg('修改失败！');
                    })
                }
                setTimeout(function () {
                    window.location.reload();
                },800);
            },
        })
    })
</script>

页面展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JA5ZIlHC-1626337071305)(C:\Users\快定\OneDrive\桌面\笔记\笔记\image\image-20210715154420190.png)]

2、Admin控制器方法代码

​ 这里我将管理员信息修改写在Admin控制器中，其中showInfo()方法就是在登录用户的session中获取该用户的管理员信息，展示在页面上，还有一个方法就是alertAdmin()方法，就是实现管理员信息的修改、修改当前用户的基本信息、并且将session中存贮的用户信息更新。

 /*
     * 管理员信息展示
     */
    public function showInfo(){
        //session中读取admin_info
       $admin_info = CakeSession::read('admin_info');
        //页面渲染
       $this->set('admin_info',$admin_info);
    }

    /*
     * 管理员基本信息修改
     */
    public function alertAdmin(){
        //获取传递的数据
        $post = $_POST;
        //获取传递的照片
        $post['img'] = $_FILES['img'];
        //传递过来的照片文件有文件名
        $file_name = $post['img']['name'];
        //下面的操作将文件名重命名为一个随机数加日期
        $name = explode('.',$file_name);
        $name[0] = rand(0,1000).time();
        $name = implode('.',$name);
        //这里是将图片存储的地址，这里将图片存储在webroot目录下的img目录，这也是数据库存储的路径。
        $name = "img/".$name;
        //将图片的暂存文件移动到上面定义的目录下。
        $res =  move_uploaded_file($post['img']['tmp_name'],$name);
        //设置数据库存储的路径。
        $post['image'] = $name;
        //成功
        if ($res){
            //修改数据库数据
            $data = $this->Admin->dellAdmin($post);
            if ($data){
                //修改成功
                $login = ClassRegistry::init('Login');
                //读取当前用户的数据
                $res = $login->find_admin($post['username']);
                //重新存储到session中，更新页头的数据
                CakeSession::delete('admin_info');
                CakeSession::write('admin_info',$res['Login']);
                //返回数据
                exit(json_encode(200));
            }else{
                exit(json_encode(400));
            }
        }else{
            exit(json_encode(200));
        }
    }

3、Admin模型代码：

模型代码实现比较简单，基本都是调用之前定义的模型

 /*
     * 新增、修改管理员
     */
    public function dellAdmin($post){
        $this->setSource('admins');
        $data = $this->save($post);
        return $data;
    }

总结

​ 这里的实现不算复杂，但是在实现中ajax提交文件数据时遇到了一些困难，让我对自己的知识进行了查漏补缺