Question

我有一个带有输入文件的HTML表单，如下所示：

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="pic" accept="image/*">
    <button type="submit">Salva</button>
</form>

有时，特别是对于大文件，上传过程会持续很长时间，用户不知道发生了什么。

是否有任何jQuery / javascript事件可以在上传开始时执行操作并在完成后执行其他操作？

Answer 1

只需使用bootstrap 3或4，就可以将加载状态设置为按钮。

例如：

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

除此之外，您还可以在按钮上设置data-loading-text属性，然后在启用加载状态时显示自定义文本。您还可以在data-loading-text属性中添加一些带有微调器的字体真棒图标。

或者，如果您不使用Bootstrap，您可以使用一些插件，例如： jQuery LoadingOverlay

输入文件上传时显示加载程序

1 个答案: