FormData append not working
JavascriptJqueryHtmlAjaxFormsJavascript Problem Overview
I wrote this to upload an image to my local Apache webserver using input
element in HTML. The file
is logged as not empty, but why is the form_data
completely empty?
$('#upload-image').change(function(e){
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType))
return;
console.log(file);
var form_data = new FormData();
form_data.append('file', file);
console.log(form_data);
$.ajax({
url: 'http://localhost/upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
});
This is my upload.php
on local webserver
<?php
header('Access-Control-Allow-Origin: *');
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
$target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
echo $target_path;
}
?>
The console.log(response)
logs all the code lines of PHP file, instead of the returned result of echo
Javascript Solutions
Solution 1 - Javascript
When logging a formData object with just console.log(formData)
it always returns empty, as you can't log formData.
If you just have to log it before sending it, you can use entries()
to get the entries in the formData object
$('#upload-image').change(function(e) {
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType)) return;
var form_data = new FormData();
form_data.append('file', file);
for (var key of form_data.entries()) {
console.log(key[0] + ', ' + key[1]);
}
$.ajax({
url: 'http://localhost/upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
});
Solution 2 - Javascript
I've noticed myself that the contentType: false
will only work on jQuery 1.7.0 and above. So make sure that you're using the right jQuery version.