I am trying to submit a full form for server side processing using jQuery. The form contains various fields including a file upload option. I am trying to use FormData to do this as I don't care about browsers that don't support it at the moment.
I have the following (simplified) jQuery code:
$("#create_event_form").submit(function(event) {
event.preventDefault();
var formData = new FormData($(this));
$.post(
"create_entity.php",
{ formData: formData },
function(data) {
var response = jQuery.parseJSON(data);
if(response.code == "success") {
alert("Success!");
} else if(response.code == "failure") {
alert(response.err);
}
}
);
});
And my server side looks like the following:
<?php
require_once('includes/database.php');
$dbh = db_connect();
$response = array();
if($_SERVER['REQUEST_METHOD'] == "POST") {
// do some other stuff...
// upload entity picture and update database
$url = $_FILES['entity_pic']['name'];
if($url != "") {
if($type == "user") {
$pic_loc = "images/profiles/";
} else if($type == "chapter") {
$pic_loc = "images/chapters/";
} else if($type == "group") {
$pic_loc = "images/groups/";
} else if($type == "event") {
$pic_loc = "images/events/";
}
// upload the picture if it's not already uploaded
if(!file_exists($pic_loc . $_FILES['entity_pic']['name'])) {
move_uploaded_file($_FILES['entity_pic']['tmp_name'], $pic_loc . $url);
}
$image_query = "INSERT INTO image (entity_id, url, type) VALUES (:entity_id, :url, :type);";
$image_query_stmt = $dbh->prepare($image_query);
$image_query_stmt->bindParam(":entity_id", $entity_id);
$image_query_stmt->bindParam(":url", $url);
$image_query_stmt->bindValue(":type", $type);
if(!$image_query_stmt->execute()) {
die(print_r($image_query_stmt->errorInfo()));
}
}
echo json_encode($response);
}
?>
And some relevant HTML:
<form id="create_event_form" action="create_entity.php" method="POST" enctype='multipart/form-data'>
<input type="file" name="entity_pic" value="Insert Photo" />
<!-- other inputs -->
</form>
Right now I get an Illegal invocation error, presumably on my initialization of my FormData object. I've been searching forever of example of how to do this with jQuery and am coming up empty. Also, I want to clarify that my server side code will work. When I pass the formData as "formData" to my PHP script, how do I access the fields in it? Would it be "$_POST['formData']['field_name']" or just $_POST['field_name'] or something else entirely?
Thanks for any help.
You can upload the selected file by creating a FormData class and passing it to Axios' post() function. const input = document. querySelector('#my-input'); const formData = new FormData(); formData. append('myFile', input.
A JavaScript method must be coded to initiate the asynchronous Ajax based file upload; A component must exist on the server to handle the file upload and save the resource locally; The server must send a response to the browser indicating the JavaScript file upload was successful; and.
The “formData” is a constructor to create an object. The object helps to work form Data methods such as append, delete, get, etc. methods syntax is below. var variable_name = new formData(); variable_name.
FormData
takes a form element in its constructor not a jQuery object - var formData = new FormData(this);
You have set some options for jQuery ajax to handle the formdata object so you should use $.ajax instead of $.post, also pass the formdata itself as the data.
$.ajax({
url: "create_entity.php",
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data) {
var response = jQuery.parseJSON(data);
if(response.code == "success") {
alert("Success!");
} else if(response.code == "failure") {
alert(response.err);
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With