Trouble getting formData to pass to AJAX for file upload - php

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