用户头像上传之 jQuery+ajax+php+预处理

小知识：

dataType：预期的服务器返回的数据类型
当设置了dataType："json"时，后端返回了json，就自动将JSON格式字符串转换为js对象，如果后端返回了String纯文本字符串，则ajax无法执行。
当设置了dataType："text"时，后端返回了json超文本字符串，可搭配JSON.parse()方法将JSON格式字符串转换为js对象。

视图效果：

提交图片和显示图片php代码：

​
<div class="head_portrait">
    <div class="head_portrait1"><img id="show_user_img"  src="<?=$db['img'] ?>" alt=""></div></div>
<div class="user_head_portrait">
    <input type="file" id="user_img" />
    <button id="user_img_u">修改</button>
</div>

​

jquery+ajax代码：

<script src="../js/jquery-3.6.0.js"></script>
<script>
    $(function(){
        $('#user_img_u').click(function(){
            var path = $('#user_img').val();
            if (path.length == 0) {
                alert("请选择上传文件！");
            } else {
                //获取上传图片文件后缀名
                var typeStart = path.lastIndexOf('.');
                img_type = path.substring(typeStart, path.length).toUpperCase();
                if (img_type !== '.PNG' && img_type !== '.JPG' && img_type !== '.JPEG' && img_type !== '.GIF') {
                    alert("只能上传图片，请选择图片！");
                    $('#user_img').val("");//清空选中上传文件内容
                }else{
                    //获取上传图片大小
                    var size = $('#user_img')[0].files[0].size;
                    if(size>=(5*1024*1024)){//前端对上传图片大小进行判断
                        alert('图片大小超出限制,前选择5m以下图片!');
                    }else{
                        //利⽤FormData对象
                        var ajaxData = new FormData();
                        // append() 方法在被选元素的结尾插入指定内容,这里插入了jquery获取的图片。
                        ajaxData.append('photo', $("#user_img")[0].files[0]);
                        $.ajax({
                            url:'./user_img_ajax.php',//后端接收图片php相对地址
                            type:"POST", 
                            data:ajaxData,
                            processData: false, //不处理发送的数据
                            contentType: false, // 不设置Content-Type请求头
                            dataType: 'json',  //若使用dataType: 'text', 后面需使用JSON.parse() 
                            success:function(data){
                                //成功发送图片输出后端处理结果
                                alert(data.content); //接收后端返回数据并弹窗输出
                                //获取自己账户头像目录下的图片位置 
                                var url = "../shangchuan/img/"+<?= $_SESSION['name'] ?>+"/"+<?= $_SESSION['name'] ?>+img_type;
                                //成功后更改原图片
                                $('#show_user_img').attr("src",url);
                                $('#user_img').val("");
                            },
                            error:function(){
                                alert('请求上传失败!');
                                $('#user_img').val("");
                            }
                        });
                    }
                }
            }
        })
    })
</script>

php后端处理代码：

<?php
    $photo = $_FILES['photo'];    //获取用户上传图片
    $photo_size = $photo['size'];   //获取用户上传图片大小
    $photo_k = $photo['type'];      //获取用户上传图片类型信息 如:image/jpeg
    $phto_type = explode('/',$photo_k)[1];   //获取图片后缀名 explode()函数基于字符串分隔符来拆分字符串
    $phto_type_S=strtoupper($phto_type);     //转大写
    $photourl = "D:/phpstudy_pro/WWW/HXF/shangchuan/img/$_SESSION[name]";   //个人头像图片存放位置 
    if(is_dir($photourl)){  //判断是否存在该路径
                //未完善  旧照片的删除 为什么不写？不懂 不会 人懒 哈哈开玩笑的  有会的评论区告诉我 谢谢你 
    }else{   //不存在就创建
        mkdir($photourl);
    }
    if($photo_size>=(5*1024*1024)){  //进行图片大小上传限制 为什么要php也验证图片大小呢 当然是前端js限制可以跳过 为了安全 双重保障
        echo('{"content":"图片大小超出限制,前选择5m以下图片!"}');   //这里错误信息提示以json形式返回前端
    }else{
        if($phto_type_S !== 'PNG' && $phto_type_S !== 'JPG' && $phto_type_S !== 'JPEG' && $phto_type_S !== 'GIF'){ // 同上
            echo('{"content":"上传不符合要求,请上传图片!"}');
        }else{
            if(isset($_FILES['photo'])){ 
                if($_FILES['photo']['error']!==UPLOAD_ERR_OK){   //判断上传文件状态
                    echo('{"content":"文件状态异常无法上传!"}');
                }else{
                    if($phto_type=='jpeg'){$phto_type='jpg';}   //发现前端提交jpg类型图片 到php变成了jpeg类型 所以我加了图片类型判断
                    $save="D:/phpstudy_pro/WWW/HXF/shangchuan/img/$_SESSION[name]/$_SESSION[name].$phto_type"; 
                    // move_uploaded_file（） 函数把的文件上传移动到新位置。(文件,路径)
                    if(!move_uploaded_file($_FILES['photo']['tmp_name'],$save)){
                    }else{ //这里用了预处理 将数据写入数据库 为什么用预处理呢 因为端午节前老师刚教了 想试试  可根据自己平时写法写不影响
                        $link = mysqli_connect('HXF','HXF','HXF0000','hxf');//
                        $stmt=$link->prepare("UPDATE `hxf_admin` SET `img`=? WHERE `username`=? ");//预处理sql模板
                        $stmt->bind_param('ss',$url,$name);//参数绑定、并为绑定变量赋值
                        $img_url = "../shangchuan/img/$_SESSION[name]/$_SESSION[name].$phto_type";//将图片位置写入数据库 即数据库用户头像图片存放位置
                        $data=[['url'=>$img_url,'name'=>$_SESSION['name']]];
                        foreach($data as $v){
                            $url= $v['url'];
                            $name = $v['name'];
                            $stmt->execute();//执行预处理
                            }
                        echo('{"content":"头像上传成功!"}'); //将成功上传信息返回前端输出
                    }
                }
            }
        }
    }
?>

大学生第一次写文章，欢迎大家评论交流，有写的不好地方，请指出，嘿嘿。

喜欢记得点赞 收藏哟。