javascript - 是否有可能在客户端有一个进度条链接到 saveAs() 的进度？

Question

我有一个用于上传任何类型文件的 Controller 。它的浓缩版是

    [HttpPost]
    public ActionResult Index (HttpPostedFileBase file, string selectedOrgName, string selectedCatName, string previouslyUploadedFilesJSON = null)
    {

           // ...... bunch of stuff 

            try
            {
                file.SaveAs(newFileServerPathAndName); // Saves file with new file name in assets folder
            }
            catch
            {
                throw new Exception("Error when trying to save file to Assets folder.");
            }

       // ... bunch of other stuff

        return View();

    }

模型就像

@using (Html.BeginForm("Index",
                        "FileUpload",
                        FormMethod.Post,
                        new { enctype = "multipart/form-data", @id ="upload-file-form"}))
{
<div>
        <label for="file">Upload File:</label>
        <input type="file" name="file" id="file" /><br>
        <input type="submit" value="Upload" /><img class="loading-icon hidden" src="/ClientPortal/images/loadinggif.gif"/>
        <input type="hidden" name="selectedOrgName" class="selectedOrgInput" />
        <input type="hidden" name="selectedCatName" id="selectedCatInput"/>
        <input type="hidden" name="previouslyUploadedFilesJSON" value="@ViewBag.uploadedFilesJSON" />
        <br><br>
</div>
}

我想知道的是，我是否可以在客户端设置一个进度条，该进度条与 saveAs 函数的进度相关联。在谷歌浏览器中，浏览器窗口底部已经有一些东西，比如

Uploading (31%)

上传文件时，必须有某种方式可以在客户端接入该号码，或者必须有其他方式使用 Controller 。

Answer 1

最简单的解决方案是在浏览器中执行此操作，因为它显然知道已发送了多少数据。在上传完成之前不会调用您的 Controller ，因此不会这样做，即使您在服务器端拥有数据，您也必须弄清楚如何将数据返回给浏览器。

jQuery 对此有一些支持，例如File upload progress bar with jQuery