FormData append not working
113,048
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);
}
});
});
Author by
necroface
Updated on July 05, 2022Comments
-
necroface almost 2 years
I wrote this to upload an image to my local Apache webserver using
input
element in HTML. Thefile
is logged as not empty, but why is theform_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 ofecho
-
necroface over 7 yearsWhen will it store on webserver? I can't find the location of
uploads
-
necroface over 7 yearsI think it is
/var/www/html
but I can't seeuploads
there -
Shamseer Ahammed over 5 yearsexactly what i wanted..Thanks
-
Shark Lasers over 4 yearsBrilliant! Trying to implement
HTMLFormElement
instead of just regular forms, I had been tryingconsole.log(formData)
and editing my form and trying again (and repeat), trying to return something until I saw this. Thanks @adeneo