C＃MVC上传进度条

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

你的代码是工作的罚款。你有上传进度，所以你只能得到传递给服务器的百分比数据。之后，你的客户不知道服务器处理你的数据的时间有多长以及处理了多少数据。 实际上，上传文件之后，上传的唯一长时间运行操作是将其保存到数据库。据我所知，你无法知道查询完成的时间，所以你无法取得进展。因此，我可以在这里建议的唯一方法是在文件上传完成后切换到一些带有“处理”标签的无限加载图标。

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