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例如傳遞進度。但是，你將無法獲得每項操作的進展（當然取決於操作），只有完成操作的百分比。