Javascript 提交表单的进度条（$服务器[“PHP”SELF]）

我试图找出如何制作一个进度条，以可视化正在提交的表单的进度。现在我发现很多文章都是通过AJAX/jQuery将数据提交到一个单独的php文件中，在该文件中解析数据

但是，当表单的action属性是$\u SERVER[“PHP\u SELF”]并且数据是在同一个文件中用PHP处理时，我该如何做呢。（按下“提交”按钮后，页面将刷新。）

例如：

<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])){
    // some validation code combined with error_message array here
    // uploading data to server and database here
}
?>

...

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" id="aaa" enctype="multipart/form-data">
    <input type="text" name="title" id="title" size="55" maxlength="55" required>
    <textarea name="description" id="description" maxlength="155" rows="3" cols="55" required></textarea>
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="file" name="images[]" id="file_input">
    <input type="submit" value="Submit" name="submit" id="submit">
</form>

...
使用此ajax函数调用其他页面中的php脚本

$('#loading_spinner').show();

    $.post('php_page.php',
{pickup:pickup,dropoff:dropoff,km:km},function(data){
        $('#fare').html(data);
         $('#loading_spinner').hide();
    });

在php页面上提交表单并返回fare div中的数据

将#loadingspinner css设置为

#loading_spinner { display:none; }

并使用img标记中的任意gif图像显示微调器

<img id="loading_spinner" src="ajax-loader.gif">

并使用javaScriptFunction（）中的ajax部分

这是在google maps中计算两点之间KM的示例
您需要使用AJAX和XHR对象。提交URL在哪里并不重要：）。您可以在form fire成功事件之后手动启动刷新。
$\u服务器[“PHP\u SELF”]
方法使用post数据重新加载当前页面。您需要创建另一个端点来通过ajax提交数据。在加载数据的同时，您可以显示进度条。以上两条注释不正确。在没有ajax的情况下，有几种笨拙的方法可以做到这一点，但它们实际上只是ajax文件上传得到广泛支持之前的老技术。所有这些在某种程度上仍然需要使用javascript——您是否正在尝试支持一个古老的浏览器？如果没有，ajax文件上传是最好的解决方案far@Steve我不想支持古老的浏览器。我只是想知道如何编写代码。@Steve你是说通过Ajax将数据提交到另一个php解析文件以可视化进度是目前为止最好的解决方案吗？
onclick="javaScriptFunction();"