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: '
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
2 Answers
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: '
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
});
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.
