上传文件时我应该把 Spinner 代码放在哪里？

Question

我找了又找，似乎找不到合适的解决方案，或者它就在我面前，我还没想出来。

我有一个表单，网站用户可以在其中选择文件（基于“文件”输入）。有 6 种不同的文件输入，文件通过一个提交按钮通过 cURL 上传到 Dropbox。所以我想要的是一个微调器，它会显示直到所有文件都上传。

表单代码如下所示...

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

在“includes/upload.inc.php”文件中，它包含要上传到保管箱的代码，然后在所有内容上传后，我使用...

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

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

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

代码是...

    </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 代码，并在 [= 上方添加上面的微调器代码46=] 代码，返回到我的表单，选择一个文件并单击“上传文档”提交按钮。正如我们所假设的那样，它将我发送到“inlcudes/upload.inc.php”文件并且微调器工作得很好。它清空了页面，微调器位于中间，下面是“正在上传...”。

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

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

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

Answer 1

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

上传文件时我应该把 Spinner 代码放在哪里？

Where do I put the Spinner Code when uploading files?

html

javascript

php

jquery

file-upload