ブートストラッププログレスバーを使用して、アップロードの進行状況をモーダルで表示する

私が構築しているc＃MVCアプリケーションがあります。これは、フォームを表示し、ユーザーがいくつかのファイルをアップロードできるようにします。ユーザーが[送信]をクリックすると、進行状況バーが表示され、100％に設定されたモーダルが表示され、「お待ちください」というメッセージが表示されます。

アップロードプロセスの進行状況をキャプチャして、モーダルの進行状況バーに表示できるようにしたいと思います。

したがって、Googleで少し検索した後、この解決策を思いつきましたが、現在の状況にどのように適応させるかがわかりません。

これが私のコードです：

Index.cshtml

<h4>Please fill out the form below and select at least one file to upload.</h4>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "upldFrm" }))
{
    <div class="row">
        <div class="col-md-2">
            <h5>Your Name:</h5>
        </div>
        <div class="col-md-4">
            <input type="text" name="uname" class="form-control" required placeholder="John Smith">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <h5>Your Email:</h5>
        </div>
        <div class="col-md-4">
            <input type="email" name="email" class="form-control" required placeholder="[email protected]">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <h5>Your Company:</h5>
        </div>
        <div class="col-md-4">
            <input type="text" name="company" class="form-control" required placeholder="Test Company, Inc">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <h5>Choose file(s) to upload (Max 500MB):</h5>
        </div>
        <div class="col-md-4">
            <input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <h5></h5>
        </div>
        <div class="col-md-4">
            <input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary" data-toggle="modal" data-target="#myModal" />
        </div>
    </div>
}

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Uploading...</h1>
            </div>
            <div class="modal-body">
                Please wait while we are uploading your files
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('sbmtBtn').on('click', function ()
    {
        $('#upldFrm').submit();
    });
</script>

これが私のコントローラーです

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Mail;

namespace vidup.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            return View();
        }

        [HttpPost]
        public ActionResult Index(List<HttpPostedFileBase> files)
        {
            var userName = Request["uname"].ToString();
            var userEmail = Request["email"].ToString();
            var userCompany = Request["company"].ToString();
            ViewBag.Username = userName;
            ViewBag.UserCompany = userCompany;
            ViewBag.UserEmail = userEmail;
            int i = 0;

            var path = Path.Combine(Server.MapPath("~/Uploads"), userCompany, userName, DateTime.Now.ToString("MM-dd-yyyy h-mm-tt"));
            if (!Directory.Exists(path))
            {
                DirectoryInfo di = Directory.CreateDirectory(path);
            }

            foreach (HttpPostedFileBase item in files)
            {
                i++;
                if (item != null && item.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(item.FileName);
                    var fullPath = Path.Combine(path, fileName);
                    ViewBag.Message3 = fileName;
                    ViewBag.Message4 = fullPath;
                    try
                    {
                        item.SaveAs(fullPath);
                        var fileCount = i + " File(s) uploaded successfully";
                        ViewBag.Message = fileCount;
                    }
                    catch (Exception e)
                    {
                        ViewBag.Message = e;
                    }
                }
                else
                {
                    ViewBag.Message = "No File selected";
                }
            }
            return View("Status");
        }

        public ActionResult Status()
        {
            return View();
        }

    }
}

編集：

提供した投稿からコードを追加しようとしましたが、エラーが発生します

Uncaught ReferenceError: formdata is not defined

これが私の見解です。なぜこのエラーが発生するのか、誰かに教えてもらえますか？またはそれを解決する方法は？

<div class="row">
        <div class="col-md-2">
            <h5>Choose file(s) to upload (Max 500MB):</h5>
        </div>
        <div class="col-md-4">
            <input name="files" type="file" id="files" multiple="multiple" class="form-control" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <h5></h5>
        </div>
        <div class="col-md-4">
            <input id="sbmtBtn" name="submit" value="Upload" class="btn btn-primary" onclick="submitForm()"/>
        </div>
    </div>
}

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Uploading...</h1>
            </div>
            <div class="modal-body">
                Please wait while we are uploading your files
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function submitForm() {
        $('#myModal').modal('show');
        var file=document.getElementById('files').files[0];
        var formData = new FormData();
        formdata.append("file_name", file);
        ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.open("POST", '@Url.Action("Index","Home")', true)
        ajax.send(formdata);
    }

    function progressHandler(event){
        var percent = (event.loaded / event.total) * 100;
        $('.bar').width(percent);
    }

    function completeHandler(){
        $('#myModal').modal('hide');
        $('.bar').width(100);
    }

    //$('sbmtBtn').on('click', function ()
    //{
    //    $('#upldFrm').submit();
    //});
</script>