AJAX 在表单提交时上传图像

Question

我正在尝试上传带有其他变量的图像，并在提交表单时，执行我的 php 代码将图像保存到用户 profile_picture 表中。

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

这是它的外观图片，以便您更好地理解：

我在使用 POST 方法之前做过，但对于 AJAX，我不知道该怎么做。

我的 Javascript 代码是（请注意，这不起作用，我只是试了一下 - 它在 console.log 中返回 Illegal invocation）：

<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>

我的 PHP 代码是：

//My account AJAX POST
if(($_POST['SaveAccountChanges']) == true & isset($_POST['securePassword_Val']))
{
    $member_config->doUpdateAccountInfo($con);
}

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

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>

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

Answer 1

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

JavaScript

(1) 确保已包含 jQuery 脚本

(2) 确保您有一个 form 元素（最好给它一个 ID 属性，例如 myform 用于引用）并且您的所有输入都具有 name 属性。

(3) 将原生表单元素（不是 jQuery 对象）传递给 FormData 构造函数。这将允许您从表单中传递所有带有name 属性的输入元素——因此您无需手动添加它们。例外是您要传递的SaveAccountChanges 字段，这里您需要使用FormData.append()。

(4) 将 $.ajax data 选项设置为仅 FormData 对象。将contentType 和processData 选项设置为false。

    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;
    }

这应该是您在客户端所需的最低要求。调试时，请使用浏览器的网络工具。

PHP

(6) 打开你的PHP error reporting。

(7) 了解&& and & 之间的区别——它们不一样。

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