上传文件时，我在哪里放置 Spinner 代码？
Posted
技术标签:
【中文标题】上传文件时，我在哪里放置 Spinner 代码？【英文标题】：Where do I put the Spinner Code when uploading files? 【发布时间】：2021-10-07 08:08:40 【问题描述】：我已经搜索和搜索，但似乎无法找到正确的解决方案，或者它就在我面前并且没有弄清楚。
我有一个表单，网站的用户将在其中选择文件（基于“文件”输入）。有 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 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”文件中添加一些其他类型的代码。
非常感谢任何帮助和建议。
【问题讨论】：
【参考方案1】：我相信您需要将微调器放在带有表单但隐藏的页面上。使用 javascript 处理表单提交并让它显示微调器。
【讨论】：
谢谢泰勒！您的回答帮助我朝着正确的方向搜索 onsubmit 并在 Javascript 中打开和关闭显示，现在它完全按照我想要的方式工作！再次感谢您！以上是关于上传文件时，我在哪里放置 Spinner 代码？的主要内容，如果未能解决你的问题，请参考以下文章