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

Question

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

上传 View :

<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 />

上传 Controller :

    [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" />

希望它有意义并给您带来想法。