无法将formData传递给AJAX进行文件上传

Question

I have the following code which passes a file from a form to a PHP script, then depending on what value that script returns, does stuff:

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

However the formData doesn't seem to get passed to the function. I've tried logging formData to the console after it's created but it appears to be empty.

Answer 1

This

$('img_form')[0]

selects all elements looking like

<img_form></img_form>

which you have none ?
This however

$('#img_form')[0]

would select the element with the ID img_form

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