Question

我遇到了使进度条正常工作的问题我已经设置了上传文件的时间。进度条工作正常，但条形图与文件大小不同步。因此，如果文件为80 MB，并且文件仍在后端处理，则进度条将始终显示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" };
    }

查看：

@{
 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>
}

Answer 1

您的代码运行正常。您有上传进度，因此您只能获得传递给服务器的数据百分比。之后，您的客户端不知道服务器处理数据的时间长度以及已处理的数据量。实际上，上传文件后唯一的长时间运行操作是将其保存到数据库中。据我所知，您无法知道查询需要多长时间才能完成，因此您无法取得进展。因此，我在这里建议的唯一一件事是切换到一些无限加载图标，其中包含＆＃34;处理＆＃34;文件上传后的标签已完成100％。

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

C＃MVC上传进度条

1 个答案: