文件上传操作的 Ajax 加载器答案

【问题标题】：Ajax loader on file upload action文件上传操作的 Ajax 加载器
【发布时间】：2023-03-09 15:01:01
【问题描述】：

我想为执行文件上传的操作配置某种 ajax 加载程序。一旦文件非常大（超过 2000 行的 Excel），它需要一些时间来处理并且它对用户来说非常不愉快，除了浏览器显示之外没有其他反馈。

对我来说，理想的解决方案是阻止弹出窗口，显示消息“正在处理文件...”（或类似的内容），以防止用户在此期间上传另一个文件。

【问题讨论】：

【解决方案1】：

嗯...我在 Symfony 应用程序上安装了类似的东西，尽管这与 Symfony 无关：

模板：

<input type="submit" class="jq-upload" value="Upload" /> // submit button
<div class="jq-loader"></div> // empty div for a loader image

JS：

$(document).ready(function()
{
  $(".jq-upload").click(function() {
     $(".jq-loader").addClass("jq-load-icon");
  });
});

CSS：

.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;}

所以，基本上点击上传按钮会在它旁边的空 div 中添加一个类，它有一个动画 gif 作为背景图像。在这种情况下，它是一个典型的加载图标。

这应该足以让您创建一个弹出窗口或根据您的需要进行调整。

【讨论】：