上传文件时显示加载图标答案

【问题标题】：Display loading icon while file is uploaded上传文件时显示加载图标
【发布时间】：2023-04-07 23:10:02
【问题描述】：

我试图在用户上传文件时显示某种类型的加载图标。我正在使用基本类型的文件上传。

这是我正在使用的控制代码：

查看：

  <input type="file" onchange="form.submit()" class="multiple" name="files" id="fileUploadBox"  value="Upload Files"multiple />

我的控制器中有一个方法可以接受文件并保存到我们的数据库中。

您可以在我的代码中看到 onchange="form.submit" 在用户选择文件后提交表单。我更喜欢这种方式，而不是用户在选择文件提交表单后必须单击另一个按钮。

我的问题是，当用户选择一个更大的文件时，页面会在加载和上传文件时停留一段时间，然后在 20-30 秒后提交表单。

我需要添加一些代码，在加载文件并重新提交表单时显示某种类型的加载/旋转图标。

我相信大部分加载发生在文件上传时，而不是在表单提交期间。

非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

您可以使用许多选项和库。如果您使用的是 JQuery，则可以使用 JQuery Loading Overlay 之类的东西很好地工作。那里也有很好的文档。

您只需将您的 onchange 呼叫更改为类似

onchange="submitForm();"

并有一个像这样的javascript函数，例如：

function submitForm(){
    $("#spinner").LoadingOverlay("show");
    $("#form").submit();
}

那里有大量不同的微调器，您不必使用 JQuery 的。但想法是一样的。

【讨论】：

【解决方案2】：

如果您使用的是 Bootstrap，我发现您可以放置文本和微调器。看看吧

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

【讨论】：