提交表单的进度条 ($_SERVER["PHP_SELF"])答案

【问题标题】：Progress bar of submitted form ($_SERVER["PHP_SELF"])提交表单的进度条 ($_SERVER["PHP_SELF"])
【发布时间】：2016-12-09 02:00:02
【问题描述】：

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

但是当表单的 action 属性是 $_SERVER["PHP_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 和 XHR 对象。提交 URL 的位置无关紧要:)。您可以在表单触发成功事件后手动启动刷新。
$_SERVER["PHP_SELF"] 方法用帖子数据重新加载当前页面。您需要创建另一个端点以通过 ajax 提交数据。同时您的数据正在加载，您可以显示进度条。
以上两个cmets不正确。在没有 ajax 的情况下，有一些尴尬的方法可以做到这一点，但它们实际上只是在 ajax 文件上传被广泛支持之前的旧技巧。仍然需要以某种方式使用 javascript - 您是否正在尝试顶级支持古老的浏览器？如果没有，ajax 文件上传是目前最好的解决方案
@Steve 我不想支持一个古老的浏览器。我只是想知道如何编码。
@Steve 你的意思是目前为止最好的解决方案是通过 Ajax 将数据提交到不同的 php 解析文件以便能够可视化进度吗？

标签： javascript php html forms progress-bar

【解决方案1】：

使用这个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">

在提交按钮上使用这个

onclick="javaScriptFunction();"

并在 javaScriptFunction() 中使用该 ajax 部分

这是在谷歌地图中计算两点之间KM的例子

【讨论】：