asp.net mvc 实现上传文件带进度条

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

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

下面贴一张效果图:

前端ajax上传文件,我使用了两种jq插件。一种是ajaxfileupload,一种是jquery.form.js(如需下载,请百度)

下面的代码是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:

 1 [HttpPost]
 2         public ActionResult UploadImage(HttpPostedFileBase postFile)
 3         {
 4             if (postFile == null)
 5             {
 6                 return Json(BasicConfig.MessageConfig.Fail("上传文件不得为空"));
 7             }
 8 
 9             try
10             {
11                 string format = postFile.FileName.Split('.').Last();//后缀名
12                 SaveFile(postFile);
13                 return Json(BasicConfig.MessageConfig.Success("上传成功"));
14             }
15             catch (Exception ex)
16             {
17                 return Json(BasicConfig.MessageConfig.Fail("上传失败"));
18             }
19         }
SaveFile方法是保存文件的方法,采用的是文件流方式保存以便于计算上传进度:
核心代码:
 1                 FileStream fs = new FileStream(fileSavePath, FileMode.Create);
 2                 BinaryWriter bw = new BinaryWriter(fs);
 3                 BinaryReader br = new BinaryReader(postFile[i].InputStream);
 4                 
 5                 int readCount = 0;//单次读取的字节数
 6                 while ((readCount = br.Read(bufferByte, 0, readBufferSize)) > 0)
 7                 {
 8                     bw.Write(bufferByte, 0, readCount);//写入字节到文件流
 9                     bw.Flush();
10                     saveCount += readCount;//已经上传的进度
11                     mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), 60);//将更新到memcached缓存中
12                     Thread.Sleep(200);//为了看到明显的过程故意暂停 
13                 }        

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

Linux下Redis主从复制以及SSDB主主复制环境部署记录

前面的文章已经介绍了redis作为缓存数据库的说明,本文主要说下redis主从复制及集群管理配置的操作记录: Redis主从复制(目前redis仅支持主从复制模...

2307
来自专栏岑玉海

hbase 学习(十三)集群间备份原理

  集群建备份,它是master/slaves结构式的备份,由master推送,这样更容易跟踪现在备份到哪里了,况且region server是都有自己的WAL...

3599
来自专栏Java技术分享

J2Cache——Java两级缓存框架

J2Cache 是 OSChina 目前正在使用的两级缓存框架。第一级缓存使用 Ehcache,第二级缓存使用 Redis 。由于大量的缓存读取会导致 L2 的...

2349
来自专栏北京马哥教育

LVS详解及基于LVS实现web服务器负载均衡

前言 LVS(Linux Virtual Server)Linux虚拟服务器,是一个虚拟的服务器集群系统。本项目在1998年5月由章文嵩博士成立,是中国国内...

3634
来自专栏数据和云

ORACLE数据库的连接

作者介绍:姜刚,云和恩墨技术顾问,2016年开始专职从事DBA运维,ORACLE OCP,精通shell及perl编程。 本文由恩墨大讲堂143期线上分享整理而...

5606
来自专栏北京马哥教育

keepalived实现高可用LVS

前言 vrrp介绍: vrrp(Virtual Router Redundancy Protocol)虚拟路由冗余协议;就是把多个路由器或多个网关设备加入到...

34712
来自专栏实战docker

Docker下kafka学习,三部曲之三:java开发

在前两章《Docker下kafka学习,三部曲之一:极速体验kafka》和《Docker下kafka学习,三部曲之二:本地环境搭建》中,我们通过命令行体验了ka...

2765
来自专栏乐沙弥的世界

实验一:SQL server 2005高可用性之----日志传送

如转载,请注明出处:http://blog.csdn.net/robinson_0612/archive/2009/10/31/4751070.aspx

922
来自专栏北京马哥教育

负载均衡LVS原理及其应用

一、LB常用解决方案 1、硬件负载均衡解决方案: F5公司: BIG-IP Citrix公司: Netscaler ...

3077
来自专栏Java技术分享

J2Cache——Java两级缓存框架

J2Cache 是 OSChina 目前正在使用的两级缓存框架。第一级缓存使用 Ehcache,第二级缓存使用 Redis 。由于大量的缓存读取会导致 L2 的...

1938

扫码关注云+社区