上传文件时我把 Spinner 代码放在哪里?

我已经搜索了又搜索,但似乎无法找到正确的解决方案,或者它就在我面前却没有弄清楚。

我有一个表单,站点用户将在其中选择文件(基于“文件”输入)。有 6 种不同的文件输入,文件通过 cURL 上传到 Dropbox,只需一个提交按钮。所以我想要的是一个微调器,它会一直显示到所有文件都上传完毕。

表单代码看起来像这样...

<form id="upload" class="formcenter" action="includes/upload.inc.php" method="post" enctype="multipart/form-data">

在“includes/upload.inc.php”文件中,它包含要上传到 dropbox 的代码,然后一旦上传了所有内容,我就使用...

    header("Location: ../uploadResult.php");

将他们重定向到不同的页面,让他们知道上传是否成功。

我正在使用 Bootstrap Spinner 作为微调器,并在其下方添加了一些文本...

代码是...

    </head>
    <style>
    .myspinner {
     height: 100vh;
     display:flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     }

    </style>
    <body>

    <div class="myspinner">
    <div class="d-flex justify-content-center d-flex align-items-center">
            <div class="spinner-border text-danger" role="status">
                    <span class="sr-only">Loading...</span>
            </div>
    </div>
    <p style="text-align: center;"> Uploading... </p>
    </div>

问题是我不知道在上传所有东西的时候把它放在哪里。

我首先进入“includes/upload.inc.php”文件,将所有的php代码注释掉,在php代码上方添加上面的spinner代码,回到我的表单,选择一个文件并单击“上传文件”提交按钮。正如我们所假设的,它将我发送到“inlcudes/upload.inc.php”文件,并且微调器运行良好。它使页面空白,旋转器位于中心,下方显示“正在上传...”。

所以我的下一个想法是取消对 php 代码的注释,然后当我再次提交表单时,我会在上传时获取微调器,因为它在 php 上方,然后当它在上传后重定向时会结束,因为它位于不同的页面。但事实并非如此。它在上传时停留在表单页面上,然后当它完成时它转到“uploadResult.php”页面。所以从未见过微调器。

这就是我感到困惑的地方...如果它在没有 php 代码的情况下工作,为什么它不能与 php 一起工作?我是否需要在表单文件中添加微调代码?或者我是否需要在“includes/upload.inc.php”文件中添加一些其他类型的代码。

非常感谢任何帮助和建议。

ranran_001 回答:上传文件时我把 Spinner 代码放在哪里?

我相信您需要在带有表单但隐藏的页面上设置微调器。使用 javascript 处理表单提交并让它显示微调器。

本文链接:https://www.f2er.com/816.html

大家都在问