1

谁能告诉我在将数据从 Excel 工作表传输到 SQL 数据库表时如何显示动画进度条？

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

我能做些什么来实现这一目标吗？

4

2 回答 2

2

我可能会使用 jQuery 的 ajaxForm() 提交表单。

然后，onSuccess 调用一个函数，该函数开始进一步的 AJAX 请求，以使用 JSON 轮询来自您的网络服务器的上传进度。除了有一个 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 是完成从网络服务器的 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);
    });
}
于 2012-11-02T10:35:54.650 回答
0

您可以尝试以下方法：

1) 在 FileLoadButton 上显示 ProgressBar 单击使用 javascript

2) 当服务器完成加载文件时，在 .aspx.csScriptManager.RegisterStartupScript中使用运行 javascript 来隐藏 ProgressBar

于 2012-11-02T10:35:05.853 回答