通過 AJAX jQuery 將帶有 Bio 的圖像上傳到 PHP

Question

我想通過 AJAX 將用戶圖像上傳到 PHP 數據庫。 我嘗試了多個教程和其他示例，但對我的代碼沒有任何作用。 這些代碼在沒有 AJAX 的情況下使用，但由於我不希望我的用戶看到上傳頁面並停留在同一頁面上，這就是為什么考慮將 AJAX 添加到代碼中的原因。 所以在過去的幾個小時里一直在嘗試這段代碼，但沒有什么對我有利。 文件沒有上傳，數據庫中的數據也沒有更新。

文件：test.php

<script> 
  function triggerClick(e) {   document.querySelector('#profileImage').click(); }
     function displayImage(e) {   if (e.files[0]) {
         var reader = new FileReader();
         reader.onload = function(e){
           document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
         }
         reader.readAsDataURL(e.files[0]);   } }
         
                $(document).on('click',"#UploadImage", function(){
                     var fd = new FormData();
                 var profileImage = $('#profileImage')[0].files[0];
                 //fd.append('profileImage',profileImage);
                var bio = document.getElementById( "bio" ).value;

                $.ajax({
                            url:"include/Upload.php",
                            method:"POST",
                            data: fd,
                             contentType: false,
                             processData: false,
 
                                success:function(data){
                                        alert(data);
                                    if(data == "Login Successful") {
                                        }
                                    else {
                                        alert(data);

                                    }
                                }
                    })       
});  
</script>

File : Upload .php

<?php
        session_start();
        include('connection.php');
        $msg = "";
        $msg_class = "";
        $Username = $_SESSION['Username'];
        //echo var_dump($Username);
    
        $conn = mysqli_connect("localhost", "root", "1234567890", "test");
        $Status = stripslashes($_POST['bio']);
        echo var_dump($Status);
        $profileImageName = $Username. '-' . time() . '-' . $_FILES['profileImage']['name'];
        echo var_dump($profileImageName);
            
        $target_dir = "../UserImages/";
        $target_file = $target_dir . basename($profileImageName);
     
  

     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 users_login SET Image='$profileImageName', Status='$Status' WHERE Username='$Username'";
                  echo var_dump($sql);
                  //header("location: profiles.php")
                if(mysqli_query($conn, $sql)){
                    session_start();

                $query="select * from $dbtable WHERE Username = '".$Username."' ";
                echo $query;
                $result2=@mysqli_query($connection,$query);
                $row=mysqli_fetch_assoc($result2);
                $_SESSION['ProfileImage']= $row['Image'];
                print_r($_SESSION['ProfileImage']);
                $_SESSION['Status']= $row['Status'];
    
                $msg = "Image uploaded and saved in the Database";
              $msg_class = "alert-success";
            } else {
              $msg = "There was an error in the database";
              $msg_class = "alert-danger";
            }
          } else {
            $error = "There was an error uploading the file";
            $msg = "alert-danger";
          }
        }
?>

Answer 1

刪除這些評論//有效，必須為 bio 添加另一條 append 行，它有效。 昨天它不工作，這就是我評論 // 的原因。 它現在工作正常。 這是我使它工作的新代碼...

var fd = new FormData();
var profileImage = $('#profileImage')[0].files[0];
fd.append('profileImage',profileImage);
var bio = document.getElementById( "bio" ).value;
fd.append('bio', bio);

致謝：Ken Lee 和 charlietfl 的評論。