無法將formData傳遞到AJAX進行文件上傳

Question

我有以下代碼，它將文件從表單傳遞到PHP腳本，然后根據腳本返回的值進行處理：

<script>
function upload_img() {
var formData = new FormData($('img_form')[0]);
console.log(formData);
alert("Hello");
var request = $.ajax({
type: 'POST',
url: 'imgupload.php', 
xhr: function() {  // Custom XMLHttpRequest
        var myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // Check if upload property exists
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
        }
        return myXhr;
    },
data: formData,
cache: false,
contentType: false,
processData: false
});
alert("Hello3");
request.done(function(data) {
    if (data == 0) {
        $('.image_holder').css("background-image", "url(/images/covers/3.jpg)");  
        alert("image upload succesfull");
    }
    else {
        alert(data);
    }
});
}
</script>
<form method="post" id="img_form" enctype="multipart/form-data">
<input type="file" name="img" id="img" style="position:absolute;top:186px;left:420px">
<input type="submit" value="Upload" onClick=upload_img() class="upload_button" />
</form>

但是，formData似乎沒有傳遞給函數。 創建完表單數據后，我嘗試將其記錄到控制台，但它似乎為空。

Answer 1

這個

$('img_form')[0]

選擇所有看起來像的元素

<img_form></img_form>

哪一個你沒有？
但是這個

$('#img_form')[0]

將選擇ID為img_form的元素

<form method="post" id="img_form" enctype="multipart/form-data">