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']也不会为空。