I tried this way-
<!DOCTYPE html>
<html>
<head>
<title>Ajax file submission</title>
</head>
<body>
<form method="post" id="my_form" enctype="multipart/form-data">
file<input type="file" name="my_file">
<input type="submit" name="submit_btn">
</form>
<!-- SCRIPT FOR THE ABOVE FORM -->
<script type="text/javascript">
let my_form=document.getElementById("my_form");
let my_file=my_form.elements[0];
let submit_btn=my_form.elements[1];
my_form.addEventListener("submit", (e) => {
e.preventDefault();
});
submit_btn.addEventListener("click", () => {
//let data = my_file.name+"="+my_file.value+"&&"+submit_btn.name+"="+submit_btn.value+"&&";
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax_file_process.php", true);
xhr.setRequestHeader("content-type", "multipart/form-data");
xhr.upload.addEventListener("progress", (e) => {
console.log("upload is fired");
console.log(e);
})
//xhr.send(data);
//console.log(new FormData(my_form));
xhr.send(new FormData(my_form));
xhr.onload = () => {
console.log("onload is fired");
if (xhr.status==200){
console.log(xhr.responseText);
}
}
});
</script>
</body>
</html>
//code in ajax_file_process.php
<?php
if (isset($_POST["submit_btn"])) {
$file_name=$_FILES["my_file"]["name"];
$file_size=$_FILES["my_file"]["size"];
$file_type=$_FILES["my_file"]["type"];
$file_tmp_loc=$_FILES["my_file"]["tmp_name"];
$file=time()."_".$file_name;
move_uploaded_file($file_tmp_loc, "images/".$file);
}
?>
The response I received is "Missing boundary in multipart/form-data POST data on line0".
One thing that I could analyze is upload progress only work before sending xhr data i.e. when xhr.send() is applied after upload. Hence there is need to be done with with the uploaded data which is uploaded in many parts as seen in console.
Second way I tried is by xhr.send(data) and data variable is collected from form as I have mentioned this as comment in script part. But, failed to get desired result or move the file to the location where I want by php. Since, I started programming 2 ago, and not able to find answer. Kindly correct the issue with pure javascript. Your answer is always appreciable. Thank you.
