C#MVC上传进度条

当上传文件时，我的进度条无法正常工作。进度条工作正常，但是进度条与文件大小不同步。因此，如果文件大小为80MB，并且文件仍在后端处理，则进度条将始终显示上载100%

我不确定代码哪里出错了？基本上希望进度条与后端正在处理的代码同步

这是迄今为止取得的进展

控制器：

//
// POST

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadMultipleFiles(IEnumerable<HttpPostedFileBase> files)
    {
        int count = 0;

        if (files != null)
        {
            foreach (var file in files)
            {
                if (file != null && file.ContentLength > 0)
                {
                    FileUploadService service = new FileUploadService();
                    var postedFile = Request.Files[0];

                    StreamReader sr = new StreamReader(postedFile.InputStream);
                    StringBuilder sb = new StringBuilder();
                    DataTable dt = CreateTable();
                    DataRow dr;
                    string s;
                    int j = 0;

                    while (!sr.EndOfStream)
                    {
                        while ((s = sr.ReadLine()) != null)
                        {
                            //Ignore first row as it consists of headers
                            if (j > 0)
                            {
                                string[] str = s.Split(',');

                                dr = dt.NewRow();
                                dr["Postcode"] = str[0].ToString();
                                dr["Latitude"] = str[2].ToString();
                                dr["Longitude"] = str[3].ToString();
                                dr["County"] = str[7].ToString();
                                dr["District"] = str[8].ToString();
                                dr["Ward"] = str[9].ToString();
                                dr["CountryRegion"] = str[12].ToString();
                                dt.Rows.Add(dr);
                            }
                            j++;
                        }
                    }
                    // Save to database
                    service.SaveFilesDetails(dt);
                    sr.Close();
                    count++;
                }
            }
        }
        return new JsonResult { Data = "Successfully " + count + " file(s) uploaded" };
    }

//
//职位
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult上载多文件（IEnumerable文件）
{
整数计数=0；
如果（文件！=null）
{
foreach（文件中的var文件）
{
如果（file！=null&&file.ContentLength>0）
{
FileUploadService=新FileUploadService（）；
var postedFile=Request.Files[0]；
StreamReader sr=新的StreamReader（postedFile.InputStream）；
StringBuilder sb=新的StringBuilder（）；
DataTable dt=CreateTable（）；
数据行dr；
字符串s；
int j=0；
而（！sr.EndOfStream）
{
而（（s=sr.ReadLine（））！=null）
{
//忽略第一行，因为它包含标题
如果（j>0）
{
字符串[]str=s.Split（'，'）；
dr=dt.NewRow（）；
dr[“Postcode”]=str[0].ToString（）；
dr[“Latitude”]=str[2].ToString（）；
dr[“经度”]=str[3].ToString（）；
dr[“County”]=str[7].ToString（）；
dr[“District”]=str[8].ToString（）；
dr[“Ward”]=str[9].ToString（）；
dr[“CountryRegion”]=str[12].ToString（）；
dt.Rows.Add（dr）；
}
j++；
}
}
//保存到数据库
服务详情（dt）；
高级关闭（）；
计数++；
}
}
}
返回新的JsonResult{Data=“成功”+count+“上载的文件”}；
}

视图：

@{
ViewBag.Title=“文件上传”；
Layout=“~/Views/Shared/\u LayoutPage.cshtml”；
}
上载CSV文件
@使用（Ajax.BeginForm（“UploadMultipleFiles”，“File”，new-AjaxOptions（）{HttpMethod=“POST”}，new{enctype=“multipart/form data”}））
{
@Html.AntiForgeryToken（）
}
0%
加载。。。
.进展{
位置：相对位置；
宽度：400px；
边框：1px实心#ddd；
填充：1px；
}
.进度条{
宽度：0px；
高度：20px；
背景色：#57be65；
}
@节脚本{
$（文档）.ready（函数（）{
（功能（）{
变量栏=$（'.progressbar'）；
变量百分比=$（'.progress bar'）；
变量状态=$（“#状态”）；
$（“#加载”）.hide（）；
$（'form'）.ajaxForm({
beforeSend:函数（）{
status.empty（）；
var percentValue='0%'；
条形宽度（百分比值）；
html（percentValue）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var percentValue=percentComplete+“%”；
条形宽度（百分比值）；
html（percentValue）；
$（“#加载”）.show（）；
},
成功：功能（d）{
var percentValue='100%'；
条形宽度（百分比值）；
html（percentValue）；
$（'fu1'）.val（''）；
$（“#加载”）.hide（）；
//警戒（d）；
},
完成：函数（xhr）{
html（xhr.responseText）；
}
});
})();
});
}

您的代码运行正常。您有上传进度，所以您只能获得传递到服务器的数据的百分比。在这之后，您的客户不知道服务器处理您的数据的时间和处理了多少数据。 事实上，上传文件后唯一长时间运行的操作就是将其保存到数据库中。正如我所知，您无法知道查询还有多少时间才能完成，因此无法获得进度。因此，我唯一能建议的是，在文件上传100%完成后，切换到带有“处理”标签的有限加载图标

---

如果您有多个长时间运行的操作，您可以在每次操作后通过信号器传递进度。但您无法获得每个操作的进度（当然取决于操作），只能获得已完成操作的百分比。

您的代码工作正常。您有上传进度，所以您只能获得传递到服务器的数据的百分比。在这之后，您的客户不知道服务器处理您的数据的时间和处理了多少数据。 事实上，上传文件后唯一长时间运行的操作就是将其保存到数据库中。正如我所知，您无法知道查询还有多少时间才能完成，因此无法获得进度。因此，我唯一能建议的是，在文件上传100%完成后，切换到带有“处理”标签的有限加载图标

如果您有多个长时间运行的操作，您可以在每次操作后传递进度

@{
 ViewBag.Title = "File Upload";
 Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<h2>Upload a CSV File</h2>

@using (Ajax.BeginForm("UploadMultipleFiles", "File", new AjaxOptions() {      HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
  @Html.AntiForgeryToken()
<div class="row">
    <div class="col-md-5">
        <input type="file" name="files" id="fu1" />
    </div>
    <div class="col-md-2">
        <input type="submit" class="btn btn-default" value="Upload File" />
    </div>
</div>
}

<div class="progress">
   <div class="progress-bar">0%</div>
</div>
<div id="status"></div>
<div id="loading" class="loader">Loading...</div>
<style>
.progress {
    position: relative;
    width: 400px;
    border: 1px solid #ddd;
    padding: 1px;
}

.progress-bar {
    width: 0px;
    height: 20px;
    background-color: #57be65;
}
 </style>
 @section scripts{
 <script src="http://malsup.github.com/jquery.form.js"></script>
 <script>
    $(document).ready(function () {
        (function () {
            var bar = $('.progress-bar');
            var percent = $('.progress-bar');
            var status = $('#status');
            $('#loading').hide();
            $('form').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentValue = '0%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentValue = percentComplete + '%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                    $('#loading').show();
                },
                success: function (d) {
                    var percentValue = '100%';
                    bar.width(percentValue);
                    percent.html(percentValue);
                    $('#fu1').val('');
                    $('#loading').hide();
                  //alert(d);
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            });
        })();
    });

</script>
}