二阶段项目所遇问题 如何头像上传数据库并且取出使用

在二阶段项目制作注册页面时想要加入头像选择功能 在制作这个头像选择中遇到的一些问题在此梳理

 

实现的方法：

1运用图片上传预览，

2写入数据库，

3从数据库调取并且使用，

 

一 图片上传预览

1.头像选择框和传值方式

html页面

        <div style="padding: 50px 100px 10px;" >
        
            
            
             
             <form id="sc" action="chuli.php" method="post" enctype="multipart/form-data" target="shangchuan">
             // 给form一个id sc（上传） 传值到chuli.php页面
    
    <input type="hidden" name="tp" value="" id="tp" />
    
    <div id="tx">


        <input type="file" name="file" id="file" onchange="document.getElementById('sc').submit()" />



    </div>

js页面

<script type="text/javascript">

//回调函数,调用该方法传一个文件路径，该变背景图
function showimg(url)
{
    
    var div = document.getElementById("tx");
    div.style.backgroundImage = "url("+url+")";
    
    document.getElementById("tp").value = url;
    

    
}



</script>

 

2.加入样式

3.处理页面

因为后面要利用数据库图片的路径才能调用出来图片所以这里我们要存入数据库上传图片的绝对路径

<?php

if($_FILES["file"]["error"])
{
    echo $_FILES["file"]["error"];
}
else
{
    if(($_FILES["file"]["type"]=="image/jpeg" 
    || $_FILES["file"]["type"]=="image/png" 
    || $_FILES["file"]["type"]=="image/jpg")
    && $_FILES["file"]["size"]<1024000)
    {
        $fname = "../img/".date("YmdHis").$_FILES["file"]["name"];    
        
        $filename = iconv("UTF-8","gb2312",$fname);
        
        if(file_exists($filename))
        {
            echo "<script>alert('该文件已存在！');</script>";
        }
        else
        {
            move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
            
            
            $delurl = iconv("UTF-8","gb2312",$_POST["tp"]);
            unlink($delurl); //删除文件
            
             
            $rurl=str_replace('\\','/',realpath($fname));//找到fname的绝对路径 将绝对路径的反斜杠替换成斜杠
             
            
            $wwwurl = $_SERVER['DOCUMENT_ROOT']; // 找到www下的路径
            
            $jdurl = str_replace($wwwurl,"",$rurl); //将www路径替换成绝对路径
            
            echo "<script>parent.showimg('{$jdurl}');</script>";
        }
        
    }
}

 

 

 

4.实现效果

 

二.传值写入数据库

根据点击注册传到处理页面值写入数据库 所以这里我们要写个js点击事件

 

<script type="text/javascript">
$("#zc").click(function(){
    var sex = $("#sex").val();
    var nl =   $("#nl").val();
    var name = $("#name").val();
    var mima = $("#mima").val();
    var tx   = $("#tp").val(); //这个是头像的绝对路径路径
        if(sex!="" && nl!="" && name!="" && mima!="" && tx!="")
        {
    $.ajax({
        url:"tianjia.php",
        data:{sex:sex,nl:nl,name:name,mima:mima,tx:tx},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            if(data.trim()=="OK")
          alert("注册成功");
            else
            alert("注册失败");
        }
        
    });
    }
})

处理页面.   这个页面就比较简单 直接把绝对路径存入数据库就可以了 存图片的类型要用text

<?php
$sex = $_POST["sex"];
$nl = $_POST["nl"];
$name = $_POST["name"];
$mima = $_POST["mima"];
$tx = $_POST["tx"];//这个是头像
require "DBDA.class.php";
$db = new DBDA();

$sql = "insert into user values('','{$name}','{$mima}','{$sex}','{$nl}','{$tx}',2)";

if($db->query($sql,0))
{
    echo "OK";
}
else
{
    echo "NO";
}

 

三.从数据库调用并使用

1.这个只要把图片路径取出来就可以啦，我是根据用户登录时的id主键调取的头像

登陆时的php页面

<?php
session_start();
$name = $_POST["name"];
$mima = $_POST["mima"];

require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from user where name = '{$name}'";
$arr = $db->query($sql);
$uid=$arr[0][0];


if($arr[0][2]== $mima && !empty($mima))
    {
        //存储用户名
        $_SESSION["name"] = $name;
        $_SESSION["uid"]=$uid; //因为要取用户的主键id调取头像 所以这里用session存了一下
        
        echo "ok";
    
}
else
{
    
    echo "no";
    

2.主页面调取头像的页面

 

 
      <div id="txk">
           <?php
        session_start();
        $uid=$_SESSION["uid"]; //把session的uid取出来
        require"DBDA.class.php";
        $db =new DBDA();
        $sql="select img from user where uid='$uid'";
        $arr=$db->StrQuery($sql);
        //echo $arr;
        echo"<img src='$arr' id='tx'>";//输出头像路径
        ?> 
    </div>

 

总结来说 难点就是怎样取到图片的绝对路径 只要掌握的这个方法从数据库调图片路径使用就没什么问题了