将数据从Excel工作表传输到SQL数据库表时的ProgressBar

Question

任何人都可以告诉我如何在从Excel工作表到SQL数据库表的数据传输过程中显示动画进度条吗？

我有一个窗体在.aspx页面。在这种形式下，有一个FileUpload控件可以上传Excel文件。在上传该文件并将其保存在服务器上的同时，我将数据从Excel工作表传输到SQL表。在此传输过程中，我想显示一个ProgressBar，并且在传输所有数据后，它将自动删除。

有什么我可以做到的吗？

Answer 1

你可以尝试这样的：

1）显示在FileLoadButton进度点击利用javascript

2）当内部.aspx.cs ScriptManager.RegisterStartupScript服务器完成加载文件使用了运行JavaScript的隐藏进度

Answer 2

我可能会使用jQuery的ajaxForm（）提交表单。

然后，onSuccess，调用一个函数，开始进一步的AJAX请求，使用JSON轮询从web服务器上传的进度。除了有一个URL来处理ASP.NET中的文件上传之外，还需要另外一种方式来以JSON格式返回某种异步工作程序的进度。

一旦你得到了JSON回来，然后你可以养活这一个jQueryUI的进度条。

例如，在ASP .NET MVC应用程序，我做了这样的事情：

在视图Upload.aspx，开始提交

<% using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "UploadForm" })) 
    { %> 
    <div> 
     <input type="file" name="CSVFile" id="CSVFile" /> 
     <button>Upload</button> 
    </div> 
<% } %> 

     var pb = $('#prog'); 
     var pbContainer = $('#pbcont'); 
     var pbPercent = $('#progp'); 
     var uploadForm = $('#UploadForm'); 
     var status = $('#StatusDetail'); 

     uploadForm.ajaxForm({ 
      iframe: true, 
      dataType: 'jason', 
      success: function (data) { 
       beginProcessing($.parseJSON($(data).text()), '" + Url.Action("UploadStatus", "Upload") + @"', pb, pbContainer, status, pbPercent); 
      }, 
      error: function (xhr, textStatus, error) { 
       alert('Error: ' + textStatus); 
      } 
     }); 

控制器的方法来处理初始上传

在这里，我创建了一个唯一的ID上传，当它开始时，这是我可以识别上传，当我想找出它进步。

我使用的是工人阶级我写了异步处理的处理 - 这是你想开始异步数据插入到数据库中。

当我们达到这个控制器的方法的时候，因此FileStream应该已经达到了服务器，所以我们可以传递给我们的工人来读取数据流，解析CSV，做数据库的工作。请注意，在这里，我通过StreamReader的到我的工作人员，以便它可以处理这一切。

// NOTE: The parameter to this action MUST match the ID and Name parameters of the file input in the view; 
    // if not, it won't bind. 
    [HttpPost] 
    public JsonResult Upload(HttpPostedFileBase CSVFile) 
    { 
     try 
     { 
      if (CSVFile == null || String.IsNullOrWhiteSpace(CSVFile.FileName)) 
       return Json("You must provide the path to your CSV file", "text/plain"); 

      if (!CSVFile.FileName.ToLower().Contains(".csv")) 
       return Json("You can only upload CSV files", "text/plain"); 

      Guid id = worker.BeginImport(dataReporistory, new StreamReader(CSVFile.InputStream)); 



      //return some JSON 
      var json = new 
      { 
       ID = id, 
       name = CSVFile.FileName, 
       size = CSVFile.ContentLength 
      }; 

      return Json(json, "text/plain"); 
     } 
     catch (Exception e) 
     { 
      return Json(Utilities.DisplayExceptionMessage(e), "text/plain"); 
     } 
    } 

控制器方法返回的最新进展

[HttpPost] 
    public JsonResult UploadStatus(Guid id) 
    { 
     UploadJob job = Worker.GetJobStatus(id); 
     return Json(job); 
    } 

JavaScript中的视图来处理进度条更新

您将会看到上述情况，给ajaxForm。当文件完成上传时，Submit（）方法将在onSuccess事件期间从这里调用beginProcessing（）。

它还会传递从Upload（）控制器方法获得的JSON，它告知我们的视图在从我们的工作人员获取作业进度时传递到更新URL的上传ID。

一旦beginProcessing被调用，它会做一些工作来设置进度条，但基本上会开始以设置的定时器间隔调用updateProgress（）。 updateProgress是执行从Web服务器的UploadStatus页面获取JSON的所有工作的函数。

一旦updateProgress从网络服务器获取JSON更新，它会执行一些工作，将它提供给插入到页面div中的jQuery UI进度栏。

<div id="pbcont"> 
    <p style="display: inline-block;"><strong>Processing...</strong></p> 
    <h3 style="display: inline-block;" id="progp"></h3> 
    <div id="prog"></div> 
    <br /> 
    <div id="StatusDetail"></div> 
</div> 


function beginProcessing(response, url, pb, pbContainer, statusContainer, pbPercent) { 
    if (!response.ID) { 
     alert('Error: ' + response); 
     return; 
    } 

    pb.progressbar({ 
     value: 0 
    }); 

    pbContainer 
     .css('opacity', 0) 
     .css('display', 'block'); 

    //Set the interval to update process. 
    var hasUpdated = false; 
    var intervalID = setInterval(function() { 
     updateProgress(url + '/' + response.ID, pb, statusContainer, pbPercent, intervalID); 
    }, 500); 
} 


function updateProgress(url, pb, statusContainer, pbPercent, intervalID) { 
    //Make an AJAX post to get the current progress from the server 

    $.post(url, 
    function (job) { 
     var newValue = 0; 
     var currentValue = pb.progressbar('value'); 

     //The percentage value retrived from server: 
     newValue = (job != null && job.TotalItems != 0 ? (job.ProcessedItems/job.TotalItems * 100) : 0); 

     if (newValue > 0) 
      hasUpdated = true; 

     if (hasUpdated && job == null) { 
      newValue = 100; 
      statusContainer.html("<strong>Status:</strong> Finished"); 
      clearInterval(intervalID); 
     } 

     if (!hasUpdated) 
      currentValue = currentValue + 1; 

     newValue = Math.max(currentValue, newValue); 
     pb.progressbar("value", newValue); 
     pbPercent.text(Math.round(newValue, 0) + '%'); 
     if (job != null) 
      statusContainer.html("<strong>Upload:</strong> " + job.Status); 
    }); 
}