在上传按钮旁边实现进度 .gif

Question

我的 MVC Web 应用程序上有一个上传按钮，允许用户上传文件。该文件被上传到系统上，并对该文件执行一些异步操作，这可能需要 1/2 分钟。我想在用户按下上传按钮时显示 processing.gif，然后在异步操作完成时隐藏 .gif，即“return View();”时已从 HttpPost Upload 控制器发生。谁能告诉我实现这一点的最简单方法？我一直在搞乱它，无法让它正常工作。从下面的代码可以看出，processing.gif 图像当前是隐藏的：

上传视图：

<h4><strong>Upload Survey</strong></h4>


<div>
    <p><strong>Upload Surveys in .PDF format</strong></p>
    <br />

    <form class="btn btn-default" method="post" enctype="multipart/form-data" action="@Url.Action("Upload", "CompletedCamps")">
        <div>
            <input name="file" type="file" class="btn btn-link" required />
            <br />
            <button type="submit" class="btn btn-block btn-primary">Import</button>

        </div>

    </form><img id="loading" src="../../Content/processing.gif" alt="Updating ..." style="display:none" />
</div>
<br />

上传控制器：

    [HttpGet] 
    public ActionResult Upload(int? id)
    {
        CompletedCamp completedCamp = db.CompletedCamps.Find(id);
        return View(completedCamp);
    }

    [HttpPost]
    public async Task<ActionResult> Upload(HttpPostedFileBase file, int? id)
    {
        CompletedCamp completedCamp = db.CompletedCamps.Find(id);

        string filename = Guid.NewGuid() + Path.GetExtension(file.FileName);
        string filepath = Server.MapPath(Path.Combine("~/Surveys/", filename));
        file.SaveAs(filepath);
        await AzureVisionAPI.ExtractToTextFile(filepath);
        ParseSurveyText parse1 = new ParseSurveyText();
        await Task.Run(() => parse1.ParseTextFile(completedCamp.RollNumber, completedCamp.OfficialSchoolName, completedCamp.Date));



        return View();
    }

Answer 1

您可以使用 jquery 之类的客户端代码来注册表单提交按钮，以便在提交表单后立即显示加载器。代码类似于：

$("form#formId").submit(function(){
   $("img#loading").show();
});

确保添加 id 属性和将在 jquery 代码中使用的 id。

相关的 html 应该如下所示：

<form id="formId" class="btn btn-default" method="post" 
      enctype="multipart/form-data" action="@Url.Action("Upload", "CompletedCamps")">
......
......
</form><img id="loading" src="../../Content/processing.gif" 
            alt="Updating ..." style="display:none" />

希望它有意义并给你一些想法。