是否可以在客户端有一个进度条链接到 saveAs() 的进度？答案

【问题标题】：Is it possible to have a progress bar on the client side linked to the progress of saveAs()?是否可以在客户端有一个进度条链接到 saveAs() 的进度？
【发布时间】：2015-08-20 20:35:45
【问题描述】：

我有一个控制器用于上传任何类型的文件。它的精简版是

    [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%)

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

【问题讨论】：

我愿意打赌谷歌没有使用 HttpPostedFileBase ;-)。我猜他们正在使用AJAX？查看this link。
这是一个不错的... Show a progress on multiple file upload Jquery/Ajax
是要报告saveAs的进度还是文件上传的进度？
@bmm6o 文件上传

标签： javascript c# asp.net asp.net-mvc razor

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该研究 SignalR。我们刚刚在 MVC 应用程序中实现了文件上传的进度条，效果很好。它非常容易实现，网络上有无数的教程和示例将向您展示如何连接它。

【讨论】：