Javascript AJAX在表单提交上上传图像

我正试图上传一个带有一些其他变量的图像，在表单提交中，执行我的php代码将图像保存到users profile_picture表中

我想以与保存数据更改相同的形式上传图像

这是一张它看起来像什么的图片，因此您可以更好地理解：

我以前在使用POST方法的地方做过，但是对于AJAX，我不知道如何做

我的Javascript代码是：请注意，这不起作用，我只是尝试了一次尝试-它在console.log中返回非法调用：

<script>
function updateMyAccount() {
  var fd = new FormData($("#fileinfo"));
  var password = document.getElementById("myAccountNewPassword").value;
  var profilePicture = document.getElementById("myAccountNewProfilePic").value;

  $.ajax({
      type: "POST",
      url: "includes/form_submit.php",
      data: {
        SaveAccountChanges: true,
        securePassword_Val: password,
        fd
      },
      success: function(msg){
        if(msg == 1) {
          update_myAccount_success();
        } else {
          general_error_forms();
        }
      },
  });
  return false;
}
</script>

然后我上传图像并将其保存到数据库的功能：

function doUpdateAccountInfo($con)
{
    //Upload users image to our /uploads directory
    $uploaddir        = 'uploads/';
    $uploadfile       = $uploaddir . basename($_FILES['fileToUpload']['name']);
    $save_to_database = ("uploads/" . $_FILES["fileToUpload"]["name"]);
    $normalPassword   = mysqli_real_escape_string($con, $_POST["securePassword_Val"]);
    $pwd              = password_hash($normalPassword, PASSWORD_DEFAULT);
    $username         = $_SESSION["username"];

    if(!empty($_FILES['fileToUpload']) & !empty($_POST['securePassword_Val']))
    {
        if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {} else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
        $query = "UPDATE users SET password = '$pwd', profile_picture = '$save_to_database' WHERE username='$username'";
        $result = mysqli_query($con, $query) or die('error');
        echo '<div class="panel -success"><div class="panel-body"><p>You have successfully updated your <b><i>password and profile picture</i></b>!</p></div>';
        //echo '1';
    }
    else if (empty($_FILES['fileToUpload']) & empty($_POST['securePassword_Val']))
    {
        $query = "UPDATE users SET password = '$pwd' WHERE username='$username'";
        $result = mysqli_query($con, $query) or die('error');
        echo '<div class="panel -success"><div class="panel-body"><p>You have successfully updated your <b><i>profile picture</i></b>!</p></div>';
        //echo '1';
    }
    else if (empty($_POST['securePassword_Val']) & !(empty($_FILES['fileToUpload'])))
    {
        if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) { echo 'Successfully uploaded image'; } else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
        $query = "UPDATE users SET profile_picture = '$save_to_database' WHERE username='$username'";
        $result = mysqli_query($con, $query) or die('error');
        echo '<div class="panel -success"><div class="panel-body"><p>You have successfully updated your <b><i>password</i></b>!</p></div>';
        //echo '1';
    }
    else if (empty($_POST['securePassword_Val']) & empty($_FILES['fileToUpload']))
    {
        $result = mysqli_query($con, $query) or die('error');
        //echo '<div class="panel -danger"><div class="panel-body"><p>You have failed to update your <b><i>password and profile picture</i></b>!</p></div>';
        echo '0';
    }
    else
    {
        //echo '<div class="panel -danger"><div class="panel-body"><p>An error occured!</p></div>';
        echo '0';
    }
}

我已经查看了发布的链接，现在有以下代码：

<script>
function updateMyAccount() {

  var fdata = new FormData($("#data"));
  fdata.append("securePassword_Val",$("#myAccountNewPassword").val());
  fdata.append("SaveAccountChanges",true);

  $.ajax({
      type: "POST",
      url: "includes/form_submit.php",
      data: 
        //SaveAccountChanges: true,
        //securePassword_Val: password,
        fdata
      ,
      async: false,
      success: function(msg){
        if(msg == 1) {
          update_myAccount_success();
        } else {
          general_error_forms();
        }
      },
       cache: false,
       contentType: false,
       processData: false
  });
  return false;
}
</script>

---

我如何通过这种方法上传图像？

通常，我不会回答这个问题，因为它会被问很多次。但是我在你的代码中发现了一些问题，所以我将尝试一下

JavaScript

1确保已包含jQuery脚本

2确保您有一个表单元素，最好给它一个ID属性，例如myform以供引用，并且您的所有输入都有name属性

3将本机表单元素而不是jQuery对象传递到FormData构造函数中。这将允许您从表单中传递具有name属性的所有输入元素，因此不需要手动添加它们。例外情况是要传递的SaveAccountChanges字段，这里需要使用FormData.append

4将$.ajax数据选项仅设置为FormData对象。将contentType和processData选项设置为false

这应该是您在客户端所需的最低限度。调试时，请使用浏览器的web工具

PHP

6打开电源

7了解它们之间的区别——它们不一样

---

8因为您是使用FormData上载的，所以需要对上载字段进行更强的验证$_即使您没有选择文件，文件['fileToUpload']也不会为空。

这里有很多关于如何使用Ajax上载文件的问题。不接受jQuery对象，但接受本机表单元素。在您的情况下，必须使用添加文件。var fdata=new FormData$data；与链接答案相反，不要使用。它违背了使用AJAX的全部目的。非常感谢！回答得很好。

<script>
function updateMyAccount() {

  var fdata = new FormData($("#data"));
  fdata.append("securePassword_Val",$("#myAccountNewPassword").val());
  fdata.append("SaveAccountChanges",true);

  $.ajax({
      type: "POST",
      url: "includes/form_submit.php",
      data: 
        //SaveAccountChanges: true,
        //securePassword_Val: password,
        fdata
      ,
      async: false,
      success: function(msg){
        if(msg == 1) {
          update_myAccount_success();
        } else {
          general_error_forms();
        }
      },
       cache: false,
       contentType: false,
       processData: false
  });
  return false;
}
</script>

    function updateMyAccount() {
        // document.getElementById('myform') === $("#myform")[0] === myform
        var fd = new FormData($("#myform")[0]);
            fd.append('SaveAccountChanges', true);

        $.ajax({
            type: "POST",
            url: "includes/form_submit.php",
            data: fd,
            contentType: false,
            processData: false,
            success: function(msg){
                if(msg == 1) {
                    update_myAccount_success();
                } else {
                    general_error_forms();
                }
            },
        });

        return false;
    }