【ASP.NET MVC】HTML5+MVC上传文件显示进度
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上传文件显示进度的更多相关文章
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- jQuery上传文件显示进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- HTML5上传文件显示进度
下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- asp.net中FileUpload得到上传文件的完整路径
asp.net中FileUpload得到上传文件的完整路径 Response.Write("完整路径:" + Server.MapPath(FileUpload1.PostedFi ...
- asp dotnet core 支持客户端上传文件
本文告诉大家如何在 asp dotnet core 支持客户端上传文件 新建一个 asp dotnet core 程序,创建一个新的类,用于给客户端上传文件的信息 public class Kanaj ...
- 【原创】用JAVA实现大文件上传及显示进度信息
用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...
- ASP.NET MVC 4 批量上传文件
上传文件的经典写法: <form id="uploadform" action="/Home/UploadFile" method="post& ...
随机推荐
- hbase的Region分裂代码分析
region分裂有2种触发情景:1是用户手动触发(参见HRegionServer的splitRegion方法),2是后台flush线程flush完一个region的memstore时,会去检查这个re ...
- [C#] 类型学习笔记三：自定义值类型
既前两篇之后,这一篇我们讨论通过struct 关键字自定义值类型. 在第一篇已经讨论过值类型的优势,节省空间,不会触发Gargage Collection等等. 在对性能要求比较高的场景下,通过str ...
- .NET类型转型的四种做法(转)
.NET类型转型的四种做法: ◆ 强制转型:(int)变量名称 ◆ int.Parse(字符串变量名称) ◆ Convert.To类型(变量名称) ◆ TryParse 强制转型 (casting) ...
- 【Android】完善Android学习（二：API 2.3.4）
备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...
- html+js实现的触屏版贪吃蛇
查看线上demo(服务器经常断开,推荐下载源码本地打开): http://47.93.103.19:8044/client/ ; 使用手机打开或者chrome浏览器的手机模式打开 源码地址 :http ...
- Linux命令--hostname和uname
hostname命令 hostname命令用于显示和设置系统的主机名称.环境变量HOSTNAME也保存了当前的主机名.在使用hostname命令设置主机名后,系统并不会永久保存新的主机名,重新启动机器 ...
- TCP之非阻塞connect和accept
套接字的默认状态是阻塞的,这就意味着当发出一个不能立即完成的套接字调用时,其进程将被投入睡眠,等待响应操作完成,可能阻塞的套接字调用可分为以下四类: (1) 输入操作,包括read,readv,rec ...
- Windows 10又现新Bug，24核心竟卡成蜗牛
Windows 10又现新Bug,24核心竟卡成蜗牛 https://news.cnblogs.com/n/573996/
- C#中执行批处理文件(.bat),执行数据库相关操作
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 【LabVIEW技巧】LabVIEW OOP怎么学
前言 有很多人对LabVIEW OOP存在比较极端的看法,大致分为两类: 1. 绝对否定派认为LabVIEW OOP只不过是LabVIEW为了追求时髦,在面向过程的基础上用簇做了一些特性,实际上完全不 ...