视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
asp.net mvc 实现文件上传带进度条的思路与方法
2020-11-27 22:36:15 责编:小采
文档


前言

文件上传与下载的操作在实际项目中经常是很重要的一个内容,在使用ASP.NET Web Form的时候我们可以使用诸多的服务器控件,FileIpload就是其中之一,但是在ASP.NET不建议使用那些服务器控件,因为那样违反三层架构原则。最近参考网络资料,学习了ASP.NET MVC如何上传文件。 而这篇文章主要重点是asp.net mvc 实现文件上传带进度条,下面来一起看看吧。

实现思路

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);//为了看到明显的过程故意暂停 
 }

总结

下载本文
显示全文
专题