asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习。
可以用js onprogress 、fileinput 、webuploader、jq ajaxsubmit等实现
思路: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 == ) {
layer.msg(data.msg, { icon: , time: },function() {
parent.location.reload();
});
} else {
$("#btnUploadFile").attr("disabled", false);
layer.msg(data.msg, { icon: , time: });
}
},
error: function(data, status, e) //服务器响应失败处理函数
{
$("#btnUploadFile").attr("disabled", false);
CloseProgressbar();
layer.closeAll("dialog");
layer.msg("上传失败", { icon: , time: });
}
}
);
后端接收文件上传请求的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 = ;//单次读取的字节数
while ((readCount = br.Read(bufferByte, , readBufferSize)) > )
{
bw.Write(bufferByte, , readCount);//写入字节到文件流
bw.Flush();
saveCount += readCount;//已经上传的进度
mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), );//将更新到memcached缓存中
Thread.Sleep();//为了看到明显的过程故意暂停
}
asp.net mvc 实现上传文件带进度条的更多相关文章
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...
- java进行文件上传,带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- Asp.Net Mvc异步上传文件的方式
今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
- 【Web】前端文件上传,带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
- servlet多文件上传(带进度条)
需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...
- web文件上传,带进度条
原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...
随机推荐
- [20170705]理解linux su命令.txt
[20170705]理解linux su命令.txt --//我一般在维护时经常使用root用户登录,然后su - oracle 转到其他用户操作--//一般都加入 - 参数.这个已经成了条件反射.. ...
- ES6 入门
1.简介 ECMAScript 6.0 是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序, ...
- [MapReduce_5] MapReduce 中的 Combiner 组件应用
0. 说明 Combiner 介绍 && 在 MapReduce 中的应用 1. 介绍 Combiner: Map 端的 Reduce,有自己的使用场景 在相同 Key 过多的情况下 ...
- 关于elk中filebeat定义好日志输出,但是redis里面却没有输出内容的问题
这两天在搞elk的时候,filebeat中指定输出日志至Broker(此处Broker采用redis作为缓存),但是redis中却没有内容,所以就开始排查来 filebeat采用RPM安装的方式来的. ...
- Hive-1.2.1_01_安装部署
前言:该文章是基于 Hadoop2.7.6_01_部署 进行的. 1. Hive基本概念 1.1. 什么是Hive Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库 ...
- python scrapy爬虫框架概念介绍(个人理解总结为一张图)
python的scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架 python和scrapy的安装就不介绍了,资料很多 这里我个人总结一下,能更加快理解scrapy和快速上手一个简 ...
- 线程间的通信_多生产者多消费者问题_JDK1.5新特性_Lock
对于同步代码块,对于锁的操作是隐式的但是在JDK1.5之前的这种方法效率有点低,判断会很多,后面升级之后有新的解决方案 jdk1.5以后将同步和锁封装成了对象,并将操作锁的隐式方式定义到了该对象中,将 ...
- 安装eclipse、maven等JAVA开发环境
一 下载JAVA,这是官方JAVA8的下载地址,包含了JDK和JRE: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-dow ...
- Fermat vs. Pythagoras POJ - 1305 (数论之勾股数组(毕达哥拉斯三元组))
题意:(a, b, c)为a2+b2=c2的一个解,那么求gcd(a, b, c)=1的组数,并且a<b<c<=n,和不为解中所含数字的个数,比如在n等于10时,为1, 2, 7,9 ...
- Java逻辑运算
逻辑运算是在关系运算基础之上的运算,能处理更加复杂的问题 逻辑运算的结果是 true 或 false 一.逻辑运算的种类: 在java的逻辑运算符中,有这么四类&&(短路与).& ...