Here is my code:
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "LiveUpdate.php";
var sb = document.getElementById("LiveUpdate").value;
var FirstName = document.getElementById("FirstName").value;
var images = document.getElementById("images").value;
var vars = "update="+sb+"&FirstName="+FirstName+"&images="+images;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("success_insert").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("success_insert").innerHTML = "processing...";
}
I just want to send all the basic details like First name, Middle name, Last name, and the image. The problem is, I can send the First name, Middle name, and Last name, but I can't pass the image to the LiveUpdate.php endpoint.
What's going on?
<input type="file"> element stores FileList of File objects selected by user at .files property, the .value of element is set as a string. You can set Content-Type to multipart/form-data, use FormData(), set name property of elements to query string keys, .value or .files property of <form> elements will be set at values of FormData object.
Call event.preventDefault() at submit event of <form>, pass form reference to FormData() constructor to set key, value pairs at FormData object.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form1" name="form1" enctype="multipart/form-data">
<div>
First Name
<input type="text" name="FirstName" id="FirstName">
<br>Live Update
<input type="text" name="LiveUpdate" id="LiveUpdate">
<br>Image
<input type="file" id="images" name="images" accept="image/*">
</div>
<input type="submit">
</form>
<script>
var form = document.getElementById("form1");
form.onsubmit = function(e) {
e.preventDefault();
function ajax_post(form) {
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "/dev/null";
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "multipart/form-data");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
//document.getElementById("success_insert").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(new FormData(form)); // Actually execute the request
// document.getElementById("success_insert").innerHTML = "processing...";
}
ajax_post(this)
}
</script>
</body>
</html></div>