[MVC]多文件、超大文件上传
话不多说,上代码。
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var page = {
init: function () {
$("#upload").click($.proxy(this.upload, this));
}, upload: function () {
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = 0,
succeed = 0;
for (var i = 0; i < $("#file")[0].files.length; i++) {
shardCount += Math.ceil($("#file")[0].files[i].size / shardSize); //总片数
}
for (var j = 0; j < $("#file")[0].files.length; j++) { var file = $("#file")[0].files[j], //文件对象
name = file.name, //文件名
size = file.size; //总大小 //var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
// shardCount = Math.ceil(size / shardSize); //总片数
var Count = Math.ceil(file.size / shardSize);
for (var i = 0; i < Count; ++i) {
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", Count); //总片数
form.append("index", i + 1); //当前是第几片 $("#output").text(0 + " / " + shardCount); //Ajax提交
$.ajax({
url: "/UpDown_File/Upload",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要,告诉jquery不要对form进行处理
contentType: false, //很重要,指定为false才能形成正确的Content-Type
success: function (s) {
//alert(s);
if (s.Error == 1) {
//alert("上传失败!");
}
++succeed;
$("#output").text(succeed + " / " + shardCount);
if (succeed == shardCount) {
$("#output").text("完成");
}
},
error: function (e) {
//alert(e);
if (e.Error == 1) {
//alert("上传失败!");
}
}
});
}
}
}
};
$(function () {
page.init();
});
</script>
</head>
<body>
<div>
<input type="file" id="file" multiple="multiple" accept=".jpg,.png,.jpeg,.ai,.psd,.tif,.txt,.svg,.rar,.zip,.docx,.pptx,.xlsx" />
<button id="upload">上传</button>
<span id="output" style="font-size: 12px">等待</span>
</div>
</body>
[HttpPost]
public ActionResult Upload()
{
//从Request中取参数,注意上传的文件在Requst.Files中
string name = Request["name"];
int total = Convert.ToInt32(Request["total"]);
int index = Convert.ToInt32(Request["index"]);
var data = Request.Files["data"]; //保存一个分片到磁盘上
string dir = Server.MapPath("~/Upload");
string file = Path.Combine(dir, name + "_" + index);
data.SaveAs(file);
string[] files = Directory.GetFiles(dir, name + "*");
//如果已经是最后一个分片,组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上,但要控制好并发防止文件锁冲突
if (files.Length == total)
{
file = Path.Combine(dir, name);
var fs = new FileStream(file, FileMode.Create);
for (int i = ; i <= total; ++i)
{
string part = Path.Combine(dir, name + "_" + i);
var bytes = System.IO.File.ReadAllBytes(part);
fs.Write(bytes, , bytes.Length);
bytes = null;
System.IO.File.Delete(part);
}
fs.Close();
} //返回是否成功,此处做了简化处理
return Json(new { Error = });
}
[MVC]多文件、超大文件上传的更多相关文章
- Asp.Net MVC 文件管理Demo(文件展示,上传,下载,压缩,文件重命名等)
之前 ,有想做一个文件管理页面. 参考了 许多资料,终于完成了一个基于Asp.net MVC 的文件管理Demo.界面如下. 一,实现功能及相关技术 文件管理Demo基于Asp.NET MVC , ...
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
前段时间做了几个关于图片.文件上传的Demo,使用客户端Query-File-Upload插件和服务端Badkload组件实现多文件异步上传,比如"MVC文件上传04-使用客户端jQuery ...
- 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- aps.net mvc webapi 实现文件或图片上传
前几天看到网上有很多复杂的实现方式,觉得没必要,所以就写个简单的实现. 一:首先来看看Api Controller里面的代码: HttpContext.Current.Request.Files 这 ...
- JS开发——文件夹的上传和下载
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- B/S开发——文件夹的上传和下载
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- Java实现FTP文件与文件夹的上传和下载
Java实现FTP文件与文件夹的上传和下载 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制 ...
- [New Portal]Windows Azure Virtual Machine (15) 在本地制作数据文件VHD并上传至Azure(2)
<Windows Azure Platform 系列文章目录> 在上一章内容里,我们已经将包含有OFFICE2013 ISO安装文件的VHD上传至Azure Blob Storage中了. ...
- 文件无刷新上传(swfUpload与uploadify)
文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...
随机推荐
- C# SM加密
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Org.Boun ...
- .Net Core使用HttpClient请求Web API注意事项
HttpClient 使用HttpClient可以很方便的请求Web API,但在使用时有一些需要注意的地方,不然会给你的程序带来毁灭性的问题. HttpClient是一个继承了IDisposable ...
- php中mvc框架总结1(7)
1.代码结构的划分: 目前的目录结构: /站点根目录 /application/应用程序目录 Model/模型目录 View/视图目录 Back/后台 front/ test/测试平台 Control ...
- 【OCP题库】最新CUUG OCP 12c 071考试题库(68题)
68.(29-13)choose two: Which two statements are true? (Choose two.) A) DICTIONARY is a view that cont ...
- JavaScript多个h5播放器video,点击一个播放其他暂停
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java使用Redis4--主从复制
redis主从复制配置和使用都非常简单.通过主从复制可以允许多个slave server拥有和master server相同的数据库副本.下面是关于redis主从复制的一些特点: 1.ma ...
- 【Node】node.js实现服务器的反向代理,解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
- nginx实现动静分离--附nginx配置文件详解
转自http://www.cnblogs.com/1214804270hacker/p/9299462.html 一.认识访问静态资源与访问动态资源的区别 静态资源:指存储在硬盘内的数据,固定的数据, ...
- spring中scope的prototype与singleton区别
最近在研究单例模式,突然想起项目中以下配置,scope="singleton" 和 scope="prototype"到底有何区别呢?以下做下简要分析. < ...
- Python库大全
网络 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络库(绑定libcurl). urllib3 – Pyth ...