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                 }        
时间: 2024-08-05 17:48:02

asp.net mvc 实现上传文件带进度条的相关文章

Extjs 使用fileupload插件上传文件 带进度条显示

一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提交的同时执行实际的文件上传. 因为没有安全的跨浏览器以编程的方式对file表单项设值的方式, 所以标准表单项的 setValue 方法是无效的. getvalue方法的返回值取决于使用何种浏览器; 一些仅仅返回文件名, 一些返回一个完整的文件路径, 一些则返回文件的虚拟路径. 二.在我看来这个插件就

ajax上传文件带进度条的思路

首先,需要2个重要的数据,total(文件总大小)和loaded(已经上传的大小),用 loaded/total,然后不断的更新进度条即可: 问:怎么拿到这两个重要数据呢? 答:在html5中有一个上传过程事件onprogress,在这个事件中可以读到这两个数据loaded和total:上传的时候不断的触发这个函数,然后更新进度条即可: 1 xhr.upload.onprogress = function(ev){ 2 if(ev.lengthComputable){ 3 //有可能文件时分块上

asp.net 文件批量选取,批量上传,带进度条,uploadify3.2 TOP

http://www.16aspx.com/Article/3444 asp.net 文件批量选取,批量上传,带进度条,uploadify3.2 TOP,布布扣,bubuko.com

Asp.Net Mvc异步上传文件的方式

今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax不支持文件上传,无奈之下只能用其他的方式 第一种方式:通过 jquery的ajaxSubmit --->(先引入jQuery脚本)需要引入jquery.form.min.js(可以通过NuGet下载) 直接上代码 @{ Layout = null; } <!DOCTYPE html> <

servlet多文件上传(带进度条)

需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus { private long bytesRead; private long contentLength; private int items; private long startTime = System.currentTimeMillis(); //set get 方法 省略 } (2)监听

jQuery上传文件显示进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../js/jquery.js"></script> </head> <body> <h2>HTML5异步上传文件,带进度条(jQuery)</h2> <form method="post"

XMLHttpRequest上传文件实现进度条

话不多说,直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script type="text/javascript"> var xhr; var ot;// var oloaded; //上传文件方法 function UpladFil

vue项目上传文件以及进度条

最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把需要上传的参数利用append追加进去. append('参数名','值') 第一个this.$refs.upload.files[0],其实就是input标签加上ref唯一关键字就是upload. var fd = new FormData(); fd.append('image', that.$

asp.net MVC ajax上传文件

普通上传 view: <body> <form id="form1" method="post" action="@Url.Action("UploadFile","Mydemo")" enctype="multipart/form-data"> <input type="file" name="file"/>