asp.net mvc 实现文件上传带进度条的思路与方法

所属分类: 网络编程 / ASP.NET 阅读数: 1941
收藏 0 赞 0 分享

前言

实现思路

ajax异步上传文件,且开始上传文件的时候启动轮询来实时获取文件上传进度。保存进度我采用的是memcached缓存,因为项目其他地方也用了的,所以就直接用这个啦。注意:不能使用session来保存进度,因为session是线程安全的不能实时获取进度,可是试试httpcache或者memorycache,这两个我没有试过,请自行尝试。

ps:使用websocket来实现也是不错的,不过我没有试过,有心的大神可以去试试。

下面贴效果图:

实现方法如下

前端ajax上传文件,我使用了两种jq插件。一种是ajaxfileupload,一种是jquery.form.js(如需下载,请百度)。关于更多jQuery插件用法还可参阅本站相关专题: 《jQuery常用插件及用法总结》

下面的代码是ajaxFileUpload的:

$.ajaxFileUpload
 (
 {
 url: '/WxManage/Media/UploadImage', //用于文件上传的服务器端请求地址
 secureuri: false, //是否需要安全协议,一般设置为false
 fileElementId: 'postFile', //文件上传域的ID
 type:"post",
 dataType: 'json', //返回值类型 一般设置为json
 success: function(data, status) //服务器成功响应处理函数
 {
 CloseProgressbar();//关闭进度条 设置进度条进度为100
 if (data.status == 1) {
  layer.msg(data.msg, { icon: 1, time: 1000 },function() {
  parent.location.reload();
  });
 } else {
  $("#btnUploadFile").attr("disabled", false);
  layer.msg(data.msg, { icon: 2, time: 1000 }); 
 }
 },
 error: function(data, status, e) //服务器响应失败处理函数
 {
 $("#btnUploadFile").attr("disabled", false);
 CloseProgressbar();
 layer.closeAll("dialog");
 layer.msg("上传失败", { icon: 2, time: 1000 });
 }
 }
 );

后端接收文件上传请求的action:

[HttpPost]
 public ActionResult UploadImage(HttpPostedFileBase postFile)
 {
 if (postFile == null)
 {
 return Json(BasicConfig.MessageConfig.Fail("上传文件不得为空"));
 }

 try
 {
 string format = postFile.FileName.Split('.').Last();//后缀名
 SaveFile(postFile);
 return Json(BasicConfig.MessageConfig.Success("上传成功"));
 }
 catch (Exception ex)
 {
 return Json(BasicConfig.MessageConfig.Fail("上传失败"));
 }
 }

SaveFile方法是保存文件的方法,采用的是文件流方式保存以便于计算上传进度:

核心代码:

FileStream fs = new FileStream(fileSavePath, FileMode.Create);
 BinaryWriter bw = new BinaryWriter(fs);
 BinaryReader br = new BinaryReader(postFile[i].InputStream);
 
 int readCount = 0;//单次读取的字节数
 while ((readCount = br.Read(bufferByte, 0, readBufferSize)) > 0)
 {
  bw.Write(bufferByte, 0, readCount);//写入字节到文件流
  bw.Flush();
  saveCount += readCount;//已经上传的进度
  mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), 60);//将更新到memcached缓存中
  Thread.Sleep(200);//为了看到明显的过程故意暂停 
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

.NET Core源码解析配置文件及依赖注入

这篇文章我们设计了一些复杂的概念,因为要对ASP.NET Core的启动及运行原理、配置文件的加载过程进行分析,依赖注入,控制反转等概念的讲解等
收藏 0 赞 0 分享

.NET Corek中Git的常用命令及实战演练

这篇文章将通过故事的形式从Git的历史谈起,并讲述Git的强大之处。然后通过实战演练教你如何在Github以及码云上托管我们的代码并进行代码的版本控制
收藏 0 赞 0 分享

Asp.Net Core WebAPI使用Swagger时API隐藏和分组详解

这篇文章主要给大家介绍了关于Asp.Net Core WebAPI使用Swagger时API隐藏和分组的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Asp.Net Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

如何利用FluentMigrator实现数据库迁移

这篇文章主要给大家介绍了关于如何利用FluentMigrator实现数据库迁移的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

ASP.NET Core利用Jaeger实现分布式追踪详解

这篇文章主要给大家介绍了关于ASP.NET Core利用Jaeger实现分布式追踪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ASP.NET Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

浅谈从ASP.NET Core2.2到3.0你可能会遇到这些问题

这篇文章主要介绍了ASP.NET Core2.2到3.0可能会遇到的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解.net core webapi 前后端开发分离后的配置和部署

这篇文章主要介绍了.net core webapi 前后端开发分离后的配置和部署,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁

这篇文章主要介绍了ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

.net 4.5部署到docker容器的完整步骤

这篇文章主要给大家介绍了关于.net 4.5部署到docker容器的完整步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用.net4.5具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

.net core并发下线程安全问题详解

这篇文章主要给大家介绍了关于.net core并发下线程安全问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.net core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多