Question

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

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

查看：

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

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

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

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

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

我相信大多数加载是在文件上传而不是在表单提交期间进行的。

非常感谢您的帮助。

Answer 1

您可以使用许多选项和库。如果您使用的是JQuery，则可以使用类似JQuery Loading Overlay的方法。那里也有很好的文档。

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

onchange="submitForm();"

并具有如下所示的javascript函数：

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

有很多不同的微调器，您不必使用JQuery。但是想法是一样的。

Answer 2

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

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

Answer 3

我建议为此使用 Bootstrap 。如果您正在使用它，则应使用此代码

var $btn = $(this);
 $btn.button('loading');
 // simulating a timeout
 setTimeout(function () {
   $btn.button('reset');
 }, 1000);