Dalam aplikasi web asp.net saya, saya memiliki bagian untuk mengunggah file, yang berfungsi dengan baik tetapi masalahnya adalah bahwa pengguna tidak dapat melihat kemajuan dan ini sangat diperlukan ketika mereka ingin mengunggah file yang lebih besar.

Jadi pertanyaan saya adalah: bagaimana saya bisa menunjukkan kemajuan (Bilah kemajuan sederhana atau persentase) saat mengunggah file. Saya mencoba beberapa solusi di forum ini tetapi tidak ada yang berhasil untuk saya.

Berikut controllernya:

 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);
    }

Ini adalah Model Tampilan:

 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; }
}

Ini Pemandangannya

@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>

}

Dan ini adalah Metode Toko di dalam pengontrol

    [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");



    }
2
John Kamaal 9 Agustus 2019, 10:34

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan plugin Formulir jQuery: http://malsup.com/jquery/form/# unggah file untuk kebutuhan Anda.

Berikut adalah contoh. Anda dapat merujuk. Semoga membantu ya teman :))

--- Pengendali---

[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"
            };
        }

---Melihat----

<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>
}

Juga, ukuran file unggah default jika 4MB. Untuk meningkatkannya, silakan gunakan bagian di bawah ini di web.config Anda -

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="1048576" />
    </system.web>
</configuration>
0
Tomato32 9 Agustus 2019, 09:31