h5在网页中上传超大文件教程实例
在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于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等属性也都在表单里。
然后是服务端，没什么新鲜的，完全是在接收一个普通的文件：
[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);
//如果已经是最后一个分片，组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
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，发个请求询问服务器文件是否已存在，如果存在就不要重复上传了，这样就实现了“极速上传”以及“断点续传”
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
以上是h5在网页中上传超大文件教程实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
微信文件过期怎么恢复 微信的过期文件能恢复吗
Feb 22, 2024 pm 02:46 PM
打开微信，在我中选择设置，选择通用后选择存储空间，在存储空间选择管理，选择要恢复文件的对话选择感叹号图标。教程适用型号：iPhone13系统：iOS15.3版本：微信8.0.24解析1首先打开微信，在我的页面中点击设置选项。2接着在设置页面中找到并点击通用选项。3然后在通用页面中点击存储空间。4接下来在存储空间页面中点击管理。5最后选择要恢复文件的对话，点击右侧的感叹号图标。补充：微信文件一般几天过期1要是微信接收的文件并没有点开过的情况下，那在七十二钟头之后微信系统会清除掉，要是己经查看了微信
照片无法打开此文件，因为格式不受支持或文件已损坏
Feb 22, 2024 am 09:49 AM
在Windows系统中，照片应用是一个便捷的方式来查看和管理照片和视频。通过这个应用程序，用户可以轻松访问他们的多媒体文件，而无需安装额外的软件。然而，有时候用户可能会碰到一些问题，比如在使用照片应用时遇到“无法打开此文件，因为不支持该格式”的错误提示，或者在尝试打开照片或视频时出现文件损坏的问题。这种情况可能会让用户感到困惑和不便，需要进行一些调查和修复来解决这些问题。当用户尝试在Photos应用程序上打开照片或视频时，会看到以下错误。抱歉，照片无法打开此文件，因为当前不支持该格式，或者该文件
可以删除Tmp格式文件吗？
Feb 24, 2024 pm 04:33 PM
Tmp格式文件是一种临时文件格式，通常由计算机系统或程序在执行过程中生成。这些文件的目的是存储临时数据，以帮助程序正常运行或提高性能。一旦程序执行完成或计算机重启，这些tmp文件往往就没有了存在的必要性。所以，对于Tmp格式文件来说，它们本质上是可以删除的。而且，删除这些tmp文件能够释放硬盘空间，确保计算机的正常运行。但是，在删除Tmp格式文件之前，我们需
出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法
Mar 21, 2024 pm 09:17 PM
在电脑中删除或解压缩文件夹，时有时候会弹出提示对话框“错误0x80004005：未指定错误”，如果遇到这中情况应该怎么解决呢？提示错误代码0x80004005的原因其实有很多，但大部分因为病毒导致，我们可以重新注册dll来解决问题，下面，小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示，0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件，或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何
如何安装GHO文件
Feb 19, 2024 pm 10:06 PM
gho文件是一种GhostImage影像文件，它通常用于将整个硬盘或分区的数据备份成一个文件。在一些特定的情况下，我们需要将这种gho文件重新安装回硬盘上，以还原硬盘或分区到先前的状态。下面将介绍gho文件的安装方法。首先，在安装之前，我们需要准备以下工具和材料：实体的gho文件：确保你拥有一份完整的gho文件，它通常以.gho为后缀名，并且包含有备份
夸克网盘的文件怎么转移到百度网盘？
Mar 14, 2024 pm 02:07 PM
夸克网盘和百度网盘都是现在最常用的储存文件的网盘软件，如果想要将夸克网盘内的文件保存到百度网盘，要怎么操作呢？本期小编整理了夸克网盘电脑端的文件转移到百度网盘的教程步骤，一起来看看是怎么操作吧。 夸克网盘的文件怎么保存到百度网盘？要将夸克网盘的文件转移到百度网盘，首先需在夸克网盘下载所需文件，然后在百度网盘客户端中选择目标文件夹并打开。接着，将夸克网盘中下载的文件拖放到百度网盘客户端打开的文件夹中，或者使用上传功能将文件添加至百度网盘。确保上传完成后在百度网盘中查看文件是否成功转移。这样就
斜杠和反斜杠在文件路径中的不同使用
Feb 26, 2024 pm 04:36 PM
文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中，常见的有两种符号分隔路径，即正斜杠（/）和反斜杠（）。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠（/）是Unix和Linux系统中常用的路径分隔符。在这些系统中，文件路径是以根目录（/）为起始点，每个目录之间使用正斜杠进行分隔。例如，路径/home/user/Docume
hiberfil.sys是什么文件？hiberfil.sys可以删除吗？
Mar 15, 2024 am 09:49 AM
最近有很多网友问小编，hiberfil.sys是什么文件？hiberfil.sys占用了大量的C盘空间可以删除吗？小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件，也是系统休眠文件。通常存储在C盘根目录下，其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用，其中包含了当前系统的内存数据，以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等，因此它可能会占用较大的硬盘空间。 hiber
