【问题标题】:Profile Pic and Bio input Update [closed]个人资料图片和生物输入更新[关闭]
【发布时间】:2021-06-29 11:06:36
【问题描述】:

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

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>

Screenshots of profile

上传图片文件的代码

<?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 {
         
      }
    
  
?>

【问题讨论】:

  • $_POST['addbio'] 数组将是空的,var_dump $_POST 看看你需要什么数据。
  • “我无法检索图像” - 这是什么意思?另外,请注意,您的查询对于 SQL 注入是广泛开放的。请查看准备好的语句
  • 检索意味着图像每次都在数据库中上传,但我无法在页面上获取它,即使其他数据是从同一个查询中获取的
  • “图像每次都在数据库中上传”是什么意思?您还没有显示任何处理任何类型文件上传的代码
  • 我忘了补充。现在我用该代码编辑了问题

标签: javascript php html user-profile


【解决方案1】:

查看您的代码,您实际上并没有对您的图像做任何事情。在您的 JavaScript 中,您读取了文件的内容,但此操作的结果似乎并未在任何地方使用。

我建议阅读有关在 PHP 中处理上传的内容:https://www.php.net/manual/en/features.file-upload.php

【讨论】:

  • 但是文件每次都在数据库中上传
  • 我很难弄清楚您的应用程序的流程。所以你的表单提交到底部脚本。这会上传图像并更新表格。该脚本完成后表中的数据是什么?查看代码 - 从一开始您的问题中是否有底部的 sn-p? - 您将文件的名称存储在表中。因此,如果我上传一个名为 my-profile.png 的文件,我希望该表具有该内容。您将文件移动到./images。因此,要在网络上显示图像,您需要将images/ 添加到数据库中的数据中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-13
  • 1970-01-01
  • 2019-02-16
  • 1970-01-01
  • 2011-02-14
  • 1970-01-01
相关资源
最近更新 更多