javascript - 个人资料图片和生物输入更新

问题描述

我正在制作一个具有更改个人资料图片和添加/编辑生物功能的用户个人资料。我正在获取用户输入文件（图片）并将其保存在数据库中。但是，数据库更新成功，但我无法检索图像。与简历相同，更新成功，即使它正在现场更改和更新，但在页面加载时它消失了。

this code is fetching data shown on profile
    <?php

$con = mysqli_connect('localhost','root','','juwsp') ;
$result = mysqli_query($con,"SELECT *  FROM signup WHERE StudentId='" . $_SESSION["StudentId"] . "' and Password = '". $_SESSION["Password"]."'");

while($row = mysqli_fetch_array($result)){
    $FirstName= $row['FirstName'];
    $LastName= $row['LastName'];
    $StudentId = $row['StudentId'];
    $Email= $row['Email'];
    $Password = $row['Password'];
    $Department = $row['Department'];
    $Batch = $row['Batch'];
    $Faculty= $row['Faculty'];
    $Bio= $row['Bio'];
    $ProfilePic=$row['ProfilePic'];
}
  
mysqli_close($con);
?>

个人资料图片选择和数据库更新的代码

<form  method="post" enctype="multipart/form-data">

  <div class="profilecard  file-upload text-center"  >  
  <img  src="http://ssl.gstatic.com/accounts/ui/avatar_2x.png" class="avatar img-circle img-thumbnail" alt="avatar">

</div>
  

        <br><br>
       
      </div></hr>
      
     
      <input type="file" class="text-center center-block file-upload" id="profileImage" name="profileImage" > 
      <button type="submit" name="save_profile" class="btn btn-primary btn-block">Save User</button>
</form>

单击和文件上传时用于生物更新的脚本

<script>
$(document).ready(function() {

  $("#Bio").click(function () {
   event.preventDefault();

<?php
$conn = mysqli_connect("localhost", "root", "", "juwsp");
  
    $Bio= $_POST['addbio'];
    $sql="UPDATE signup SET Bio='$Bio' WHERE StudentId='" . $_SESSION["StudentId"] . "'  ";
    $edit = mysqli_query($conn,$sql);
  
      
   ?>

});
  var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.avatar').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    

    $(".file-upload").on('change', function(){
        readURL(this);
    });
   
});
</script>

个人资料截图

上传图片文件的代码

<?php
  $msg = "";
  $msg_class = "";
  $conn = mysqli_connect("localhost", "root", "", "juwsp");
  if (isset($_POST['save_profile'])) {

   
    // for the database
    $profileImageName =  $_FILES["profileImage"]["name"];
    // For image upload
    $target_dir = "images/";
    $target_file = $target_dir . basename($profileImageName);
    // VALIDATION
    // validate image size. Size is calculated in Bytes
    if($_FILES['profileImage']['size'] > 200000) {
      $msg = "Image size should not be greated than 200Kb";
      $msg_class = "alert-danger";
    }
    // check if file exists
    if(file_exists($target_file)) {
      $msg = "File already exists";
      $msg_class = "alert-danger";
    }
    // Upload image only if no errors
    if (empty($error)) {
      if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
        $sql = "UPDATE signup SET ProfilePic='$profileImageName' WHERE StudentId='" . $_SESSION["StudentId"] . "'";
        (mysqli_query($conn, $sql));
        
            

            }


        } 
        
        else {
           
        
        }
      } 
      
      else {
         
      }
    
  
?>

标签： javascriptphphtmluser-profile

javascript - 个人资料图片和生物输入更新

问题描述

解决方案

推荐阅读