下载本文档
版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】利用HTML5分片上传超大文件
在网页中直接上传大文件一直是个比较头疼的问题，主要面临的问题一般包括两类：一是上传时间长中途一旦出错会导致前功尽弃；二是服务端配置复杂，要考虑接收超大表单和超时问题，如果是托管主机没准还改不了配置，默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片，一片一片的传到服务端，再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已，不用整个文件重传，而且每个分片的大小可以控制在4MB以内，服务端不用做任何设置就可适应。常用的解决方案是RIA，以flex为例，通常是利用FileReference.load方法加载文件得到ByteArray，然后分片构造表单（flash的高版本不允许直接访问文件）。不过这个load方法只能加载较小的文件，大约不超过300MB，因此适用性不是很强。好在现在有了HTML5，我们可以直接构造分片了，这是一个非常喜人的进步，只可惜目前适用面不广（IE啊IE，真是恨你恨得牙痒痒）。言归正传，来看一个DEMO吧，基于ASP.NetMVC3，只是示例，很多问题做了简化处理。主要是客户端，新特性都体现在这里：<%@
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
=
,
//文件名
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"
>等待</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
});
}上面的DE
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 文化创新课标解读
- 偏瘫患者肩痛康复治疗
- 细胞结构解析
- 小学音乐教育课程资源开发计划
- 标准设计合同范本及使用说明
- 物流动态跟踪技术
- 外阴鳞状细胞癌术后护理
- 新旧药品管理法假药劣药对比分析
- 五十二式卡通动作讲解
- 中考化学真题及详解贵州省2019
- 2025年蛟川书院分班测试题及答案
- 飞机数字孪生与预测性维护集成
- 2025《煤炭购销合同》
- 2025年行政执法证考试必刷题库与答案
- 基孔肯雅热防控知识考试试题含答案
- 2025年机关事业单位技能资格考试-文秘资料技师历年参考题库含答案解析(5卷套题【单项选择题100题】)
- 吉林化工(危险化学品)、医药企业电气设备设施安全隐患排查指南
- 劳动用工考试试题及答案
- 护理消毒液的配置
- 2025年职业指导师（四级）考试模拟试题汇编与模拟试题解析
- 2024墙面原位加固修复技术规程
评论
0/150
提交评论