asp.net-mvc - 画像 mvc をアップロードするための進行状況バー

Question

アプリのフォルダーに複数の画像をアップロードする MVC asp.net アプリケーションがあります。画像をアップロードし、圧縮してフォルダに保存し、サムネイルを別のフォルダに保存するだけです。アプリで他のジョブを実行できるため、アップロードはバックグラウンドで行われています。

大量の画像をアップロードするには時間がかかります。そのため、フローティング ダイアログ ボックスまたはポップアップ ウィンドウに画像のアップロードのステータスをプログレス バーとして表示する必要があります。アップロードが完了すると、プロセスが完了したことを示すアラートが表示されます。

ビューで

<form action="" method="post" enctype="multipart/form-data">
  @Html.Label("Select the property : ");
  @Html.DropDownList("Address", new SelectList(ViewBag.Address as System.Collections.IEnumerable), "---Select---",new { id = "add"})

  <label for="file">Filename:</label>
  <input type="file" name="files" id="file" multiple="true"/>
  <input type="submit" />

コントローラー内

 [HttpPost]
        public ActionResult Index(HttpPostedFileBase[] files, FormCollection c)
        {
            int no = 0;
            string path = Path.Combine(Server.MapPath("~/Images"), c["Address"].Replace(' ', '_'));
            string fn = "";
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            else
                no = Directory.GetFiles(path).Length;
            foreach (var file in files)
            {
                string fname = "img_" + no++ + file.FileName.Substring(file.FileName.LastIndexOf('.'));
                fn = Path.Combine(path, fname);
                Thread.Sleep(10000);

                ImageCodecInfo jpgEncoder = null;
                ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
                foreach (ImageCodecInfo codec in codecs)
                {
                    if (codec.FormatID == ImageFormat.Jpeg.Guid)
                    {
                        jpgEncoder = codec;
                        break;
                    }
                }
                var image1 = System.Drawing.Image.FromStream(file.InputStream, true, true);
                if (jpgEncoder != null)
                {
                    Encoder encoder = Encoder.Quality;
                    EncoderParameters encoderParameters = new EncoderParameters(1);

                        long quality = 20;
                        EncoderParameter encoderParameter = new EncoderParameter(encoder, quality);
                        encoderParameters.Param[0] = encoderParameter;
                        FileStream ms = new FileStream(fn, FileMode.Create, FileAccess.Write);
                        image1.Save(ms, jpgEncoder, encoderParameters);
                        ms.Flush();
                        ms.Close();
                }



                using (var image = System.Drawing.Image.FromStream(file.InputStream, true, true)) /* Creates Image from specified data stream */
                {
                    using (var thumb = image.GetThumbnailImage(
                         50, /* width*/
                         60, /* height*/
                         () => false,
                         IntPtr.Zero))
                    {
                        var jpgInfo = ImageCodecInfo.GetImageEncoders().Where(codecInfo => codecInfo.MimeType == "image/png").First(); /* Returns array of image encoder objects built into GDI+ */
                        using (var encParams = new EncoderParameters(1))
                        {
                            string pa = Path.Combine(path, "Thumb");
                            if (!Directory.Exists(pa))
                            {
                                Directory.CreateDirectory(pa);
                            }
                            string outputPath = Path.Combine(pa, fname);
                            long quality = 100;
                            encParams.Param[0] = new EncoderParameter(Encoder.Quality, quality);
                            thumb.Save(outputPath, jpgInfo, encParams);
                        }
                    }
                }

            }

            return RedirectToAction("Index");

}

アプリのフローティング ダイアログ ボックスまたはポップアップ ウィンドウにプログレス バーを作成するのを手伝ってくれる人はいますか??