Mvc:显示进度的动画gif，同时加载大型excel文件到数据库

我正在将一个大的excel文件加载到数据库中。我想让我的用户看到有一个活动正在进行。我开始了，但不知道如何继续。

1. 我的ActionResult Index方法有两个参数。如何在javascript中定义它。

2. 点击提交按钮，我想显示动画图像，然后在处理完成时停止

3. 我知道我必须以某种方式隐藏div。不知道该怎么做。

请协助。下面是我的代码。

    @model SampleTemplate.Models.ResultViewModel
    @{
        ViewBag.Title = "Index";
    }
    <h2>File upload section</h2>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="uploadSection">
            <div id="divloading">
                <p style="position:absolute; top:30%; left:45%;color: Red;">
                    Excel file in process, please wait...<img src="../../Images/animated.gif" />
                </p>
            </div>
            <div>
                <p class="headerSection">Select script</p>
                <p>
                <select name = "genericId">
                        <option value="12.1">12_1_flat_goods</option>
                        <option value="12.2">12_2_mats_bm</option>                             
                </select>
                  </p>                                      
            </div>
            <div id="spacebetween">
                <p class="headerSection">Path to source file: </p>
                <p class="spacebelow"><input type="file"  name="file"  value="" /> </p>  
                <p><button id="submi" name="Submit" onclick="JavascriptFunction();">Submit</button></p>              
            </div>       
        </div>    
    }
    <script type="text/javascript" language="javascript">
        function JavascriptFunction() {
            var url = '@Url.Action("","Home")';
            $("#divLoading").show();
        }
    </script>
    ...Here is my method
     [HttpPost]
            public ActionResult Index(HttpPostedFileBase file, ResultViewModel resModel)
            {
                //code to upload excel file goes here. No need to show this.
            }

function TestViewModel() {
    var self = this;
    self.itemsToDisplay = ko.observableArray([]);
    //this property can be used to hold the bool for when you first hit the upload button
    self.uploadStarted = ko.observable(false); // when page is loaded, this is false
    //this is a property that will hold the bool value to show/hide the gif after the upload has started
    self.uploadCompleted = ko.observable(false); // when page is loaded this is false
    ko.applyBindings(self);
};

<div data-bind="visible: !uploadCompleted() && uploadStarted()">
    // your gif image reference will go here 
    // it will only be displayed when uploadCompleted is false and uploadStarted is true
</div>
<button type="button" id="uploadButton" name="Submit">Upload</button>
<script type="text/javascript">
    var viewModel = new TestViewModel();
    // make an ajax call to your controller method to upload your content
    // on success set your loaded property to true to hide your gif
    $('#uploadButton').click(function() {
        viewModel.uploadStarted(true);
        $j.ajax({
            type: "POST",
            url: "../home/Index",
            data: ko.toJSON({ file: file, resModel: model}),
            contentType: "application/json",
            success: function (data) {
                // your controller will return your values in data
                // update your viewModel properties
                viewModel.itemsToDisplay(data);
                viewModel.uploadCompleted(true);
                viewModel.uploadStarted(false);
            }
         });
     });
</script>