使用AJAX和PHP上傳文件圖像

Question

我正在嘗試創建一個上傳文檔，該文檔將上傳個人資料圖片。 我在從changePicture表單捕獲數據時遇到麻煩，該表單僅具有圖像輸入和提交。 迄今為止，我從未使用過FormData對象，因此我仍在學習。 任何指導都是有用的。

看我的HTML

<form id="changePicture" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="name">Update Your Profile Picture</label>
            <input type="file" id="profilePic" class="form-control" name="profilePic">
            <input type="hidden" value="<?php echo $id; ?>" name="id">
        </div>
        <button type="submit" id="updateProfileBtn" class="btn btn-success float-right">Upload Image</button>
 </form>

這是我的AJAX代碼：

function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
    e.preventDefault();

    $("#spinner").show();

    setTimeout(function(){
        $.ajax({
           url: "../ajax/admin/updateProfilePic.php",
           type: "POST",
           data: new FormData(this),   
           cache: false,
           contentType: false,
           processData: false,
           success: function(result){
               $("#spinner").hide();
               $("#changePicture").append(result);

               setTimeout(function(){
                $("#changePicture").slideDown();
               }, 1500);
           }
        });
    }, 3000);
});    
}

此時，PHP文件僅回顯“正在工作”，以確保它可以正常訪問頁面。 但是，當我嘗試通過變量查找文件時，未發送任何內容並返回undefined index 。

Answer 1

為什么將AJAX呼叫包裝在一個

setTimeout(function() {..})

？

這樣，您不能簡單地編寫new FormData(this) ，因為this上下文未引用您要查找的表單。

嘗試在不超時的情況下執行代碼，或嘗試將表單數據存儲在全局變量中

編輯：添加示例：

var myFormData;

function updateProfilePic(){
$("#changePicture").on("submit", function(e) {
    e.preventDefault();

    $("#spinner").show();
    myFormData = new FormData(this);

    setTimeout(function(){
       $.ajax({
           url: "../ajax/admin/updateProfilePic.php",
           type: "POST",
           data: myFormData, 
           ....

Answer 2

這是不確定的，因為它在ajax的范圍內

嘗試：

me = this; 

$.ajax({ 
url: "../ajax/admin/updateProfilePic.php", 
type: "POST", 
data: new FormData(me),
...

就我而言，當我使用ajax時，我總是更喜歡對圖像進行base64編碼並將其作為JSON傳遞給PHP，但是我想這是個人喜好...