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

我在MVC Web应用程序上有一个上传按钮，该按钮允许用户上传文件。该文件被上载到系统上，并且对该文件进行了一些异步操作，这可能需要1/2分钟的时间。我想在用户按下上传按钮时显示processing.gif，然后在异步操作完成后（即“ return View（）;”时）隐藏.gif。发生在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();
    }

最佳答案

您可以使用客户端代码（如jquery）注册表单提交按钮，以便在提交表单后立即显示加载程序。代码将类似于：

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

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

相关的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" />

希望这有意义并给您想法。

关于javascript - 在上传按钮旁边实现进度.gif，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59859860/