Не отображается echo из-за ajax запроса?

Question

[LegitPlayer]

Файл загружается, прогресс бар загружается, ответ приходит, но не отображается. До подключения js echo отображалось, после подключения - echo не отображается. В чем проблема? Спасибо!

Форма:

<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

[ynChrome]

Ну как бы текст echo отображается, да вот только ничто этот ответ не читает. А надо, чтобы читало.
Да, вы правы, дело в AJAX. JS сходил, постучал по вашему URL, закинул туда файл, и на этом его работа закончилась.
Чтобы не закончилась, а что-то куда-то вывести, надо дописывать JS. Например, так:

$.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);
    // ...
}