<!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>