关键词：
在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。
比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。
常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。
好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，只可惜目前适用面不广（IE啊IE，真是恨你恨得牙痒痒）。
言归正传，来看一个DEMO吧，基于ASP.Net MVC3，只是示例，很多问题做了简化处理。
主要是客户端，新特性都体现在这里：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5大文件分片上传示例</title>
<script src="../Scripts/jquery-1.11.1.min.js"></script>
<script>
var page =
init: function()
$("#upload").click($.proxy(this.upload, this));
,
upload: function()
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for(var i = 0;i < shardCount;++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", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax(
url: "../File/Upload",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function()
++succeed;
$("#output").text(succeed + " / " + shardCount);
);
;
$(function()
page.init();
);
</script>
</head>
<body>
<input type="file" id="file" />
<button id="upload">上传</button>
<span id="output" style="font-size:12px">等待</span>
</body>
</html>这里的slice方法和FormData都是html5之前不存在的。通过这样的方法，我们的表单构造出来是这样的，抓包看看：
可以看到构造出来的Content-Type是multipart/form-data，也就是符合RFC标准的那个最传统的文件上传表单。另外我们同时传输的name、total等属性也都在表单里。
然后是服务端，没什么新鲜的，完全是在接收一个普通的文件：
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);
//如果已经是最后一个分片，组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
if(index == total)
file = Path.Combine(dir, name);
var fs = new FileStream(file, FileMode.Create);
for(int i = 1;i <= total;++i)
string part = Path.Combine(dir, name + "_" + i);
var bytes = System.IO.File.ReadAllBytes(part);
fs.Write(bytes, 0, bytes.Length);
bytes = null;
System.IO.File.Delete(part);
fs.Close();
//返回是否成功，此处做了简化处理
return Json(new Error = 0 );
上面的DEMO很多问题是简化处理的，比如没做什么异常处理，客户端也没有判断服务端是否出错重试一类的，各位可以自己完善。
在上面的基础上，我们可以做很多功能上的扩展，比如我们可以控制所有分片是顺序上传还是并发上传，以适用不同应用。再比如我们可以在整体文件上传前以及分片上传前都先计算一下相应的HASH，发个请求询问服务器文件是否已存在，如果存在就不要重复上传了，这样就实现了“极速上传”以及“断点续传”。
HTML5 地理位置定位(HTML5 Geolocation)原理及应用 http://www.linuxidc.com/Linux/2012-07/65129.htm
HTML5移动开发即学即用(双色) PDF+源码 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入门学习笔记 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移动Web开发笔记 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 开发中的本地存储的安全风险 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5与CSS3权威指南》及相配套源码 http://www.linuxidc.com/Linux/2013-02/79950.htm
关于 HTML5 令人激动的 10 项预测 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5与CSS3实战指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
本文永久更新链接地址 ： http://www.linuxidc.com/Linux/2014-09/106816.htm
vue超大文件上传如何实现？
...先判断文件大小，是否需要分片，如果需要分片。就可以利用文件的方法slice(start,end)分成一段段的小文件。举个例子：<inputtype="file"><script>letfl=document.querySelector('input');letSIZE=20*1024*1024;//文件分片界限是20MBf... 查看详情
微服务架构|怎样解决超大附件分片上传？(代码片段)
导读：分片上传、断点续传，这两个名词对于做过或者熟悉文件上传的朋友来说应该不会陌生，总结本篇文章希望对从事相关工作的同学能够有所帮助或者启发。 当我们的文件特别大的时候，上传是不是需... 查看详情
超大文件上传和断点续传的源代码
总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块）... 查看详情
vue超大文件上传解决方案:分片断点上传
...所必须直面的。本文给出的解决方案是：前端实现数据流分片长传，后面接收完毕后合并文件的思路。实现文件夹上传，要求：服务端保留层级结构，支持10w级别的文件夹上传。大文件上传及断点续传，要求：支持50G级的单个文... 查看详情
html5大文件上传解决方案支持分片断点上传
...合成一个文件；* 中断了从哪个分片开始。如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了 查看详情
大文件分片上传(代码片段)
Vue项目中遇到了大文件分片上传的问题，之前用过webuploader，索性就把Vue2.0与webuploader结合起来使用，封装了一个vue的上传组件，使用起来也比较舒爽。上传就上传吧，为什么搞得那么麻烦，用分片上传？分片与并发结合，将一... 查看详情
超大文件上传和断点续传的源代码
总结一下大文件分片上传和断点续传的问题。因为文件过大（比如1G以上），必须要考虑上传过程网络中断的情况。http的网络请求中本身就已经具备了分片上传功能，当传输的文件比较大时，http协议自动会将文件切片（分块）... 查看详情
局域网超大文件上传(代码片段)
文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。一、前端代码英国程序员RemySharp总结了这些新的接口 ，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上... 查看详情
上传文件慢，springboot分片上传文件(代码片段)
Java上传文件慢，大文件上传卡顿，请求超时怎么办？话不多说直接上代码，代码复制过去可以直接使用第一步：创建后端代码packagecn.leon.demo.rest;importlombok.extern.slf4j.Slf4j;importorg.apache.commons.io.FileUtils;importorg.sp 查看详情
webuploader分片上传的实现代码（前后端分离）
参考技术A本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势... 查看详情
基于.netcore+jquery实现文件断点分片上传(代码片段)
基于.NETCore+Jquery实现文件断点分片上传前言该项目是基于.NETCore和Jquery实现的文件分片上传，没有经过测试，因为博主没有那么大的文件去测试，目前上传2G左右的文件是没有问题的。使用到的技术Redis缓存技术Jqueryajax请求技术... 查看详情
html5分割上传实现超大文件无插件网页上传示例
4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及，特别是高清视频和4K视频应用的到来，超大文件上传已经成为了日常的基础应用需求。但是在很多情况下，平台运营方并没有大文件上传和断点续... 查看详情
awss3大文件分片上传(代码片段)
分段上传允许上传单个对象作为一组分段。每个分段都是对象数据的连续部分。您可以独立上传以及按任意顺序上传这些对象分段。如果任意分段传输失败，可以重新传输该分段且不会影响其他分段。上传完所有的数据元分段后... 查看详情
上传文件慢，springboot分片上传文件(代码片段)
...rtjava.text.SimpleDateFormat;importjava.util.Date;importjava.util.UUID;/***分片上传文件相关接口**@authorleon*@date2021/03/1917:40:06*/@Slf4j@RequestMapping("/chunk-upload")@RestCont 查看详情
springboot整合ffmpeg进行视频分片上传（linux）(代码片段)
SpringBoot整合FFmpeg进行视频分片上传分片上传的核心思路：分片上传到意义：分片上传的原理：准备工作：一：下载、解压代码展示：pom文件yml配置工具类controller调用Url转换MultipartFile的工具类如controller中... 查看详情
springboot实现分片上传断点续传大文件极速秒传-备忘(代码片段)
...传体验呢，答案有的，就是下边要介绍的几种上传方式1.分片上传1.1什么是分片上传 分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（我们称之为Part）来进行分别上传，上传完之后再由服... 查看详情
html5实现浏览器端大文件分片上传
我们平时经常做的是上传文件，上传文件夹与上传文件类似，但也有一些不同之处，这次做了上传文件夹就记录下以备后用。这次项目的需求：支持大文件的上传和续传，要求续传支持所有浏览器，包括ie6,ie7,ie8,ie9,Chrome,Firefox,36... 查看详情
大文件分片上传的实现前后台完整版(代码片段)
...止上传请求超时，导致上传失败。这时候可能将视频分片上传可以对你的项目有一个小小的体验优化。本片文章前端是vue，后台基于PHP进行的分片上传，需要的小伙伴可以借鉴。分片上传1、什么是分片上传分片上传&#... 查看详情