echo not showing due to ajax request?

Question

PHP

The file is loading, the progress bar is loading, the response is coming, but not displayed. Before connecting js echo was displayed, after connecting - echo is not displayed. What is the problem? Thank you!

The form:

<form action="union.php" method='post' enctype="multipart/form-data" id="my_form">
    <input type="file" name="file"/><br><br>
    <input type="submit" value="Upload" id="submit"/>
    <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            0%
        </div>
    </div>
</form>

union.php

<?php

$name= $_FILES['file']['name'];

$tmp_name= $_FILES['file']['tmp_name'];

$position= strpos($name, ".");

$fileextension= substr($name, $position + 1);

$fileextension= strtolower($fileextension);


if (isset($name)) {
    echo $tmp_name;
    $path= 'site.ru/uploads';
    if (empty($name))
    {
        echo "Please choose a file";
    }
    else if (!empty($name)){
        if (($fileextension !== "mp4") && ($fileextension !== "ogg") && ($fileextension !== "webm"))
        {
            echo "The file extension must be .mp4, .ogg, or .webm in order to be uploaded";
        }


        else if (($fileextension == "mp4") || ($fileextension == "ogg") || ($fileextension == "webm"))
        {
            if (move_uploaded_file($tmp_name, $path.$name)) {
                echo $tmp_name.'   ';
                echo $path.'   '.$name;
                echo 'Uploaded!';
            }
        }
    }
}
?>

<?php

if (($fileextension == "mp4") || ($fileextension == "ogg") || ($fileextension == "webm"))
{
    echo "<video width='320' controls>
<source src='$path/$name' type='video/$fileextension'>
Your browser does not support the video tag.
</video>";

}

?>

JS:

$(document).ready(function() {

  $('#my_form').on('submit', function(event) {

    event.preventDefault();

    var formData = new FormData($('#my_form')[0]);

    $.ajax({
      xhr : function() {
        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(e) {

          if (e.lengthComputable) {

            console.log('Bytes Loaded: ' + e.loaded);
            console.log('Total Size: ' + e.total);
            console.log('Percentage Uploaded: ' + (e.loaded / e.total))

            var percent = Math.round((e.loaded / e.total) * 100);

            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

          }

        });

        return xhr;
      },
      type : 'POST',
      url : '/union.php',
      data : formData,
      processData : false,
      contentType : false
    });

  });

});

Answer 1

Well, as if the text echois displayed, but that's just nothing this answer reads. And it needs to be read.
Yes, you're right, it's AJAX. JS went, tapped on your URL, uploaded a file there, and that was the end of its work.
In order not to end, but to display something somewhere, you need to add JS. For example, like this:

$.ajax({
      xhr : function() {
        var xhr = new window.XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(e) {

          if (e.lengthComputable) {

            console.log('Bytes Loaded: ' + e.loaded);
            console.log('Total Size: ' + e.total);
            console.log('Percentage Uploaded: ' + (e.loaded / e.total))

            var percent = Math.round((e.loaded / e.total) * 100);

            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');

          }

        });

        return xhr;
      },
      type : 'POST',
      url : '/union.php',
      data : formData,
      processData : false,
      contentType : false,
      // В response будет то, что вывел echo
      success: doSmth(response) // <-- Вот тут. Можно и анонимную функцию сделать, это не критично
    });

// Чтобы не усложнять
function doSmth(responseData) {
    // ...
    // ...
    console.log(responseData);
    // ...
}