0

I've been seeing a lot of thread about this, but I still cannot figure out how to make it work with $.post. I just recently added this input type file for uploading an image together with a text that will go to my database. I can get this done in server side but not with ajax. Some said to use the FormData object but I still can't make it work.

My goal is to simply move the image to a specific folder with AJAX and PHP. What I can't figure out is how to pass the image from the input type file with AJAX to PHP.

The codes I provided below is as basic I could make them for them to be easy to read here.

Here's my html

<form name="form" id="form" action="upload.php" method="post" enctype="multipart/form-data">
<input type="text" id="message" name="message"/>
<input type="file" id="imgupload" name="file" accept="image/jpeg, image/png, image/gif"/>
<input type="submit" id="submit" name="submit" value="Submit"/>
</form>

Here's my Ajax call

$(document).on("click", "#submit", function() {
var message = $("#message").val();
var form = $("#form")[0]; //this is what I'm trying to figure out
var form_data = new FormData(form); //this is what I'm trying to figure out

$.post("upload.php", {
message: message,
form_data //this is what i'm trying to pass to upload.php but doesn't work
}, function(data) {
// success msg
};
});

Here's my php:

if($_FILES['file']['name'] != '') {
$filename = $_FILES['file']['tmp_name']
$path = $_FILES['file']['name'];
$fullpath = "../uploads/images/".$path;
move_uploaded_file($filename, $fullpath);

$message = $_POST['message']; //this is for the message in input text, you may ignore
$messageQuery = "insert to db...." //this is for my insert query for database, you may ignore
mysqli_query($conn, messageQuery) //again this is just a query for database, you may ignore
}
else {
echo "Failed to upload";
}
user874737
  • 469
  • 1
  • 9
  • 24
  • The request was sended? Whats the result? – Marcaum54 Apr 13 '20 at 10:31
  • Remove the `message: message,` . Form Data grabs every input already – Rotimi Apr 13 '20 at 10:32
  • 1
    and what error message do you get?? – Rotimi Apr 13 '20 at 10:33
  • If I were to delete the message:message, how should I call it on the PHP file? Is it by its variable name I set in Ajax? I'm not getting any error. Nothing's happening. I think it's because I'm using $.post and it only accepts success. – user874737 Apr 13 '20 at 10:45
  • From my observation, adding the "form_data" as a data in $.post makes this not work. Am I correctly calling it by simply adding "form_data" in $.post {"upload.php, { form_data }, function (data) { }); ?? – user874737 Apr 13 '20 at 10:50
  • 2
    Does this answer your question? [How to send FormData objects with Ajax-requests in jQuery?](https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery) – kidA Apr 13 '20 at 11:07
  • I see. So the FormData is incompatible with $.post. I've been always using $.post. I'll try to make it work with $.ajax then, which I think 100% of the threads I read are all about using $.ajax. I'll post an update here later. – user874737 Apr 13 '20 at 11:17
  • It did answer my question. I checked it just now. Apparently, FormData isn't compatible with $.post as mentioned in that thread. Thank you @kidA. I made it work using $.ajax. And as for the append, I just learned that it's to add key/value pairs to pass on the PHP file. – user874737 Apr 13 '20 at 12:34

0 Answers0