如何在Asp.net MVC Web应用程序c＃中上传文件时显示进度？

Question

在我的asp.net Web应用程序中，我有一个上传文件的部分，该部分工作正常，但问题是用户看不到进度，并且在他们要上传较大的文件时特别有必要。

所以我的问题是：上传文件时如何显示进度（简单的进度条或百分比）。 我在这个论坛上尝试了一些解决方案，但是没有一个对我有用。

这是控制器：

 public ActionResult BriefDetails(int? ID)
    {
       var dtl = _context.Original.SingleOrDefault(b => b.Id == Id);
        var vm = new BriefUploadVM()

        {
            Id = dtl.Id,
            brief_rp = dtl.brief_rp,
        };
        return View(vm);
    }

这是视图模型：

 public class BriefUploadVM
{
    public int Id { get; set; }
    public string BriefReport { get; set; }

    [Required(ErrorMessage = "Error: Attach your file")]
    [NotMapped]
    public HttpPostedFileBase brief_rp { get; set; }
}

这是视图

@using (Html.BeginForm("Store", "Reports", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

<div class="form-group">

    <input type="file" name="brief_rp" />
    @Html.ValidationMessageFor(a=> a.brief_rp)
</div>

@Html.AntiForgeryToken();
@Html.HiddenFor(a => a.Id);
<button class="btn btn-primary">Submit</button>

}

这是控制器内部的存储方法

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Store(BriefUploadVM rp)
    {



            string Second_filename = Path.GetFileNameWithoutExtension(rp.brief_rp.FileName);
            string Second_extension = Path.GetExtension(rp.brief_rp.FileName);
            Second_filename = Second_filename + DateTime.Now.ToString("yymmssfff") + Second_extension;
            rp.BriefReport = "Files/" + Second_filename;
            Second_filename = Path.Combine(Server.MapPath("~/Files/"), Second_filename);
            rp.brief_rp.SaveAs(Second_filename);


            var item = _context.original.Single(a => a.Id == rp.Id);
            item.Brief_Report = rp.BriefReport;
            _context.SaveChanges();
            return RedirectToAction("Success", "Project");



    }

Answer 1

您可以根据需要使用jQuery Form插件： http : //malsup.com/jquery/form/#file-upload 。

这是一个样本。 你可以参考。 希望对您有帮助，我的朋友:)）

---控制器---

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult AsynFileUpload(IEnumerable<HttpPostedFileBase> files)
        {
            int count = 0;
            if (files != null)
            {
                foreach (var file in files)
                {
                    if (file != null && file.ContentLength > 0)
                    {                        
                        var path = Path.Combine(Server.MapPath("~/UploadedFiles"), file.FileName);
                        file.SaveAs(path);
                        count++;
                    }
                }
            }
            return new JsonResult
            {
                Data = "Successfully " + count + " file(s) uploaded"
            };
        }

- -视图 - -

<style>
    .progress {
        position: relative;
        width: 400px;
        border: 1px solid #ddd;
        padding: 1px;
        border-radius: 3px;
    }

    .bar {
        background-color: #B4F5B4;
        width: 0%;
        height: 20px;
        border-radius: 3px;
    }

    .percent {
        position: absolute;
        display: inline-block;
        top: 3px;
        left: 48%;
    }
</style>

<h2> AsynFileUpload </h2>

@using (Ajax.BeginForm("AsynFileUpload", "Home", new AjaxOptions() { HttpMethod = "post" }, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <input type="file" name="files" multiple />
    <br />
    <input type="submit" value="upload file" />    
}
<br />
<div class="progress">
    <div class="bar"></div>
    <br />
    <div class="percent">0%</div>
</div>
<div id="status"></div>

@section scripts {
    <script src="https://malsup.github.io/min/jquery.form.min.js"></script>
    <script>
        (function () {

            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            });

        })();
    </script>
}

---

另外，默认的上传文件大小为4MB。 要增加它，请在web.config中使用以下部分-

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="1048576" />
    </system.web>
</configuration>