Показать сообщение отдельно
  #4 (permalink)  
Старый 06.07.2021, 21:01
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

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>

Последний раз редактировалось Rise, 06.07.2021 в 21:05.
Ответить с цитированием