写完asp.net多文件上传后，感觉这种上传还是有很多缺陷，于是。。。（省略一万字，不废话）。这里我没用传统的asp.net，而选择了开源的asp.net core，原因很简单，.net core是.net新的开始，更是.net和.net开发者的未来，希望.net发展越来越好（大家的工资越来越高(●ˇ∀ˇ●)）。
1.前端的实现：
1).html：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/lib/bootstrap/dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/UploadJs.js"></script>
</head>
<body>
<div class="row" style="margin-top:20%">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<input type="text" value="请选择文件" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
<br />
<span id="output">0%</span>
<button type="button" id="file" onclick="UploadStart()" style="border:1px solid #ccc;background:#fff">开始上传</button>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
2).javascript：
var UploadPath = "";
//开始上传
function UploadStart() {
var file = $("#path")[0].files[0];
AjaxFile(file, 0);
}
function AjaxFile(file, i) {
var name = file.name, //文件名
size = file.size, //总大小shardSize = 2 * 1024 * 1024,
shardSize = 2 * 1024 * 1024,//以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
if (i >= shardCount) {
return;
}
//计算每一片的起始与结束位置
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("lastModified", file.lastModified);
form.append("fileName", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
UploadPath = file.lastModified
//Ajax提交文件
$.ajax({
url: "/Upload/UploadFile",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function (result) {
if (result != null) {
i = result.number++;
var num = Math.ceil(i * 100 / shardCount);
$("#output").text(num + '%');
AjaxFile(file, i);
if (result.mergeOk) {
var filepath = $("#path");
filepath.after(filepath.clone().val(""));
filepath.remove();//清空input file
$('#upfile').val('请选择文件');
alert("success!!!");
}
}
}
});
}
