head>

    <title>Index</title>

    <style type="text/css">

        #statusBorder

        {

            position:relative;

            height:5px;

            width:100px;

            border:solid 1px gray;

            display:none;

            }

        #statusFill{

            position:absolute;

            top:;

            left:;

            width:0px;

            background-color:Blue;

            height:5px;

}

    </style>

    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var uniqueId = " @Guid.NewGuid().ToString()";

        $(document).ready(function (event) {

            $('#startProcess').click(function () {

                $.post("Home/StartLongRunningProcess",{ id: uniqueId }, function (data) {

                    if (data = "null") {

                        alert("文件为空！");

                    }

                    else {

                        $('#statusBorder').show();

                        getStatus();

                    }

                }, "multipart/form-data");

                event.preventDefault;

            });

        });

        function getStatus() {

            var url = 'Home/GetCurrentProgress/' + uniqueId;

            $.get(url, function (data) {

                if (data != "") {

                    $('#status').html(data);

                    $('#statusFill').width(data);

                    window.setTimeout("getStatus()", );

                }

                else {

                    $('#status').html("Done");

                    $('#statusBorder').hide();

                    alert("文件保存成功");

                };

            });

        }

    </script>

</head>

<body>

    <div>

     <div id="status">

            </div>

        <h2>@Html.Encode(ViewData["Message"]) </h2>

        <div>

            <input id="File1" type="file" name="file" />

            <input id="startProcess" type="submit" value="提交" />

        </div>

        <br />

        <div id="statusBorder">

            <div id="statusFill">

            </div>

        </div>

    </div>

</body>

</html>

Action代码

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            ViewData["Message"] = "Ajax Progress Bar Example";

            return View();

        }

        delegate string ProcessTask(string id);

        MyLongRunningClass longRunningClass = new MyLongRunningClass();

        public ContentResult StartLongRunningProcess(string id)

        {

            var file=Request.Files["file"];

            if (file != null)

            {

                file.SaveAs(Server.MapPath("~/Content/" + file.FileName));

                longRunningClass.Add(id);

                ProcessTask processTask = new ProcessTask(longRunningClass.ProcessLongRunningAction);

                processTask.BeginInvoke(id, new AsyncCallback(EndLongRunningProcess), processTask);

                return Content("ok");

            }

            else

            {

                return Content("null");

            }

        }

        public void EndLongRunningProcess(IAsyncResult result)

        {

            ProcessTask processTask = (ProcessTask)result.AsyncState;

            string id = processTask.EndInvoke(result);

            longRunningClass.Remove(id);

        }

        public ContentResult GetCurrentProgress(string id)

        {

            this.ControllerContext.HttpContext.Response.AddHeader("cache-control", "no-cache");

            var currentProgress = longRunningClass.GetStatus(id).ToString();

            return Content(currentProgress);

        }

        public ActionResult Upload(HttpPostedFileBase[] fileToUpload)

        {

            ViewBag.Message = "File(s) uploaded successfully";

            return RedirectToAction("Index");

        }

cs代码

public class MyLongRunningClass

    {

        private static object syncRoot = new object();

        private static IDictionary<string, int> ProcessStatus { get; set; }

        public MyLongRunningClass()

        {

            if (ProcessStatus == null)

            {

                ProcessStatus = new Dictionary<string, int>();

            }

        }

        public string ProcessLongRunningAction(string id)

        {

            for (int i = ; i <= ; i++)

            {

                Thread.Sleep();

                lock (syncRoot)

                {

                    ProcessStatus[id] = i;

                }

            }

            return id;

        }

        public void Add(string id)

        {

            lock (syncRoot)

            {

                ProcessStatus.Add(id,);

            }

        }

        public void Remove(string id)

        {

            lock (syncRoot)

            {

                ProcessStatus.Remove(id);

            }

        }

        public int GetStatus(string id)

        {

            lock (syncRoot)

            {

                if (ProcessStatus.Keys.Count(x => x == id) == )

                {

                    return ProcessStatus[id];

                }

                else

                {

                    return ;

                }

            }

        }

    }

【ASP.NET MVC】HTML5+MVC上传文件显示进度的更多相关文章

  1. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  2. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  3. HTML5上传文件显示进度

    下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...

  4. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  5. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  6. asp.net中FileUpload得到上传文件的完整路径

    asp.net中FileUpload得到上传文件的完整路径 Response.Write("完整路径:" + Server.MapPath(FileUpload1.PostedFi ...

  7. asp dotnet core 支持客户端上传文件

    本文告诉大家如何在 asp dotnet core 支持客户端上传文件 新建一个 asp dotnet core 程序,创建一个新的类,用于给客户端上传文件的信息 public class Kanaj ...

  8. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

  9. ASP.NET MVC 4 批量上传文件

    上传文件的经典写法: <form id="uploadform" action="/Home/UploadFile" method="post& ...

随机推荐

  1. 大道至简第一章伪代码读后感o(╯□╰)o

    import.java.io*; import class duhougan; public static void main(Striing arges[]){ system.out.println ...

  2. [LeetCode] 22. Generate Parentheses ☆☆

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  3. 洛谷金秋夏令营模拟赛 第2场 T11737 时之终末

    这道题就是道状压dp...比赛的时候太贪心 然后状压又不好 所以T2 T3一起挂了QAQ 吸取教训QAQ f[i][j][k]表示前i个数选了j个 最后a个的状态为k的答案 #include<c ...

  4. JS语句循环（100以内奇偶数、100以内与7先关的数、100以内整数的和、10以内阶乘、乘法口诀、篮球弹起高度、64格子放东西）

    3.循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都 ...

  5. 【洛谷 P2783】 有机化学之神偶尔会做作弊 （双联通分量）

    题目链接 可能是除了<概率论>的最水的黑题了吧 用\(Tarjan\)缩点(点双联通分量),然后就是树上两点之间的距离了,跑\(LCA\)就好了. #include <cstdio& ...

  6. Deep learning with Theano 官方中文教程（翻译）（三）——多层感知机（MLP）

    关于更多的http://deeplearning.net/tutorial/的翻译还有学习笔记会陆续整理传到博客. 供大家相互交流和学习,本人水平有限,若有各种大小错误,还请巨牛大牛小牛微牛们立马拍砖 ...

  7. 【HNOI】 c tree-dp

    [题目描述]给定一个n个节点的树,每个节点有两个属性值a[i],b[i],我们可以在树中选取一个连通块G,这个连通块的值为(Σa[x])(Σb[x]) x∈G,求所有连通块的值的和,输出答案对1000 ...

  8. Select 使用不当引发的core，你应该知道的

    排查一个死机问题,搞了好几天时间,最终确定原因:最终确定问题原因,在此分享一下: 第一步:常规根据core文件查看栈信息,gdb –c core xxxx 如下rip不正确,指令地址错乱,栈信息已破坏 ...

  9. •搭建LAMP环境及快速部署双网站并实现基于域名的虚拟主机

    本节所讲内容: 实战:搭建LAMP环境及快速部署双网站并实现基于域名的虚拟主机 LAMP架构:??? Linux+Apache+Mysql+PHP Linux+Apache+Mysql/MariaDB ...

  10. python之requests库使用问题汇总

    一.请求参数类型 1.get requests.get(url, data, cookies=cookies) url:字符串: data:字典类型,可以为空: cookies:字典类型,可以为空: ...