如何在 Asp.net MVC Web 应用程序 C# 中上传文件时显示进度?

约翰·卡马尔

在我的 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>

}

这是控制器内的 Store 方法

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



    }
番茄32

您可以使用 jQuery 表单插件: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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Web应用程序ASP.net MVC中嵌入C#.net控制台应用程序

来自分类Dev

如何在ASP.NET MVC和C#应用程序中以编程方式修改web.config?

来自分类Dev

如何从Asp.Net MVC Web应用程序中的FileStremResult对象获取文件?

来自分类Dev

如何在RedHat OS中运行asp.net MVC4 Web应用程序

来自分类Dev

如何使用 asp.net C# 在 Web 应用程序中显示捕获的指纹

来自分类Dev

如何在执行Selenium Web驱动程序测试之前自动启动ASP.NET MVC Web应用程序?

来自分类Dev

将我的asp.net mvc Web应用程序发布到IIS之后,无法在我的Content文件夹中上传文件

来自分类Dev

将我的asp.net mvc Web应用程序发布到IIS之后,无法在我的Content文件夹中上传文件

来自分类Dev

ASP.NET MVC3 Web应用程序

来自分类Dev

如何检查IIS内部署的asp.net mvc Web应用程序的日志

来自分类Dev

如何对ASP.NET MVC Web应用程序进行授权的HttpWebRequest

来自分类Dev

如何提高ASP.NET MVC Web应用程序的性能?

来自分类Dev

如何检查IIS内部署的asp.net mvc Web应用程序的日志

来自分类Dev

如何在div中显示(ASP.NET)Web应用程序?

来自分类Dev

如何在ASP .NET MVC 5 Web应用程序的Seed方法中通过UserManager创建ApplicationUser

来自分类Dev

如何在ASP .NET MVC Web应用程序中创建可折叠/下拉/可扩展局部视图

来自分类Dev

如何在Visual Studio Community 2013中创建ASP.NET MVC 5 Web应用程序?

来自分类Dev

我们如何在Visual Studio Code中调试ASP.NET MVC Web应用程序?

来自分类常见问题

单击按钮即可从ASP .NET MVC Web应用程序打开IOS应用程序

来自分类Dev

单击按钮即可从ASP .NET MVC Web应用程序打开IOS应用程序

来自分类Dev

将文件从ASP.NET MVC 4.6应用程序发布到ASP.NET Core Web API

来自分类Dev

在 ASP .NET CORE 中更新 Web 应用程序替换文件或删除文件,如何在更新时将文件保留在应用程序中

来自分类Dev

如何使用Asp.Net MVC C#创建CMS应用程序

来自分类Dev

如何在ASP.NET C#MVC中为现有软件创建SaaS应用程序

来自分类Dev

如何在ASP Net Core MVC应用程序中从Azure AD B2C获取用户列表?

来自分类Dev

使用ftp上传到站点C#ASP.NET Web窗体应用程序

来自分类Dev

如何反编译 ASP.NET / C# Web 应用程序

来自分类Dev

如何在Asp.Net(aspx)应用程序C#中添加API控制器(Web API 2)

来自分类Dev

为什么.NET在MVC asp.net应用程序中生成两个web.config文件?

Related 相关文章

  1. 1

    如何在Web应用程序ASP.net MVC中嵌入C#.net控制台应用程序

  2. 2

    如何在ASP.NET MVC和C#应用程序中以编程方式修改web.config?

  3. 3

    如何从Asp.Net MVC Web应用程序中的FileStremResult对象获取文件?

  4. 4

    如何在RedHat OS中运行asp.net MVC4 Web应用程序

  5. 5

    如何使用 asp.net C# 在 Web 应用程序中显示捕获的指纹

  6. 6

    如何在执行Selenium Web驱动程序测试之前自动启动ASP.NET MVC Web应用程序?

  7. 7

    将我的asp.net mvc Web应用程序发布到IIS之后,无法在我的Content文件夹中上传文件

  8. 8

    将我的asp.net mvc Web应用程序发布到IIS之后,无法在我的Content文件夹中上传文件

  9. 9

    ASP.NET MVC3 Web应用程序

  10. 10

    如何检查IIS内部署的asp.net mvc Web应用程序的日志

  11. 11

    如何对ASP.NET MVC Web应用程序进行授权的HttpWebRequest

  12. 12

    如何提高ASP.NET MVC Web应用程序的性能?

  13. 13

    如何检查IIS内部署的asp.net mvc Web应用程序的日志

  14. 14

    如何在div中显示(ASP.NET)Web应用程序?

  15. 15

    如何在ASP .NET MVC 5 Web应用程序的Seed方法中通过UserManager创建ApplicationUser

  16. 16

    如何在ASP .NET MVC Web应用程序中创建可折叠/下拉/可扩展局部视图

  17. 17

    如何在Visual Studio Community 2013中创建ASP.NET MVC 5 Web应用程序?

  18. 18

    我们如何在Visual Studio Code中调试ASP.NET MVC Web应用程序?

  19. 19

    单击按钮即可从ASP .NET MVC Web应用程序打开IOS应用程序

  20. 20

    单击按钮即可从ASP .NET MVC Web应用程序打开IOS应用程序

  21. 21

    将文件从ASP.NET MVC 4.6应用程序发布到ASP.NET Core Web API

  22. 22

    在 ASP .NET CORE 中更新 Web 应用程序替换文件或删除文件,如何在更新时将文件保留在应用程序中

  23. 23

    如何使用Asp.Net MVC C#创建CMS应用程序

  24. 24

    如何在ASP.NET C#MVC中为现有软件创建SaaS应用程序

  25. 25

    如何在ASP Net Core MVC应用程序中从Azure AD B2C获取用户列表?

  26. 26

    使用ftp上传到站点C#ASP.NET Web窗体应用程序

  27. 27

    如何反编译 ASP.NET / C# Web 应用程序

  28. 28

    如何在Asp.Net(aspx)应用程序C#中添加API控制器(Web API 2)

  29. 29

    为什么.NET在MVC asp.net应用程序中生成两个web.config文件?

热门标签

归档