Olga27,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form id="formX" action="upload.php" method="post" enctype="multipart/form-data">
<input id="textX" type="text" name="textX" value="" required>
<input id="fileX" type="file" name="fileX" value="" required>
<input id="buttonX" type="submit" value="Submit">
<progress id="progressX" max="100" value="0"></progress>
<div id="responseX"></div>
</form>
<script>
document.querySelector('#formX').addEventListener('submit', function(e) {
//return; // Displaying upload.php
e.preventDefault();
var formData = new FormData(this), // this = form
progress = this.querySelector('#progressX'),
response = this.querySelector('#responseX');
//formData.append('formId', this.id); // Extra fields
progress.value = 0;
response.innerHTML = 'Uploading...';
var xhr = new XMLHttpRequest();
xhr.open(this.method, this.action, true);
//xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // Detecting AJAX
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progress.value = (e.loaded / e.total) * 100;
}
};
xhr.onload = function() {
if (this.status == 200) {
response.innerHTML = this.responseText;
} else {
response.innerHTML = 'Server error!';
}
};
xhr.onerror = function() {
response.innerHTML = 'Network error!';
};
xhr.send(formData);
// PHP variables: $_POST['textX'], $_FILES['fileX']
// Optional: $_POST['formId'], $_SERVER['HTTP_X_REQUESTED_WITH']
});
</script>
</body>
</html>