H5的文件域FileReader怎样分段读取文件上传到服务器

<div class="container">
 <div class="panel panel-default">
 <div class="panel-heading">分段读取文件：</div>
 <div class="panel-body">
 <input type="file" id="file" />
 <blockquote style="word-break:break-all;"></blockquote>
 </div>
 </div>
</div>

/*
* 分段读取文件为blob ，并使用ajax上传到服务器
* 分段上传exe文件会抛出异常
*/
var fileBox = document.getElementById('file');
file.onchange = function () {
 //获取文件对象
 var file = this.files[0];
 var reader = new FileReader();
 var step = 1024 * 1024;
 var total = file.size;
 var cuLoaded = 0;
 console.info("文件大小：" + file.size);
 var startTime = new Date();
 //读取一段成功
 reader.onload = function (e) {
 //处理读取的结果
 var loaded = e.loaded;
 //将分段数据上传到服务器
 uploadFile(reader.result, cuLoaded, function () {
 console.info('loaded:' + cuLoaded + 'current:' + loaded);
 //如果没有读完，继续
 cuLoaded += loaded;
 if (cuLoaded < total) {
 readBlob(cuLoaded);
 } else {
 console.log('总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
 cuLoaded = total;
 }
 });
 }
 //指定开始位置，分块读取文件
 function readBlob(start) {
 //指定开始位置和结束位置读取文件
 //console.info('start:' + start);
 var blob = file.slice(start, start + step);
 reader.readAsArrayBuffer(blob);
 }
 //开始读取
 readBlob(0);
 //关键代码上传到服务器
 function uploadFile(result, startIndex, onSuccess) {
 var blob = new Blob([result]);
 //提交到服务器
 var fd = new FormData();
 fd.append('file', blob);
 fd.append('filename', file.name);
 fd.append('loaded', startIndex);
 var xhr = new XMLHttpRequest();
 xhr.open('post', '../ashx/upload2.ashx', true);
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
 // var data = eval('(' + xhr.responseText + ')');
 console.info(xhr.responseText);
 if (onSuccess)
 onSuccess();
 }
 }
 //开始发送
 xhr.send(fd);
 }
}

/// <summary>
/// upload2 的摘要说明
/// </summary>
public class upload2 : IHttpHandler
{
 LogHelper.LogHelper _log = new LogHelper.LogHelper();
 int totalCount = 0;
 public void ProcessRequest(HttpContext context)
 {
 HttpContext _Context = context;
 //接收文件
 HttpRequest req = _Context.Request;
 if (req.Files.Count <= 0)
 {
 WriteStr("获取服务器上传文件失败");
 return;
 }
 HttpPostedFile _file = req.Files[0];
 //获取参数
 // string ext = req.Form["extention"];
 string filename = req.Form["filename"];
 //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
 int loaded = Convert.ToInt32(req.Form["loaded"]);
 totalCount += loaded;
 
 string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
 newname += filename;
 //接收二级制数据并保存
 Stream stream = _file.InputStream;
 if (stream.Length <= 0)
 throw new Exception("接收的数据不能为空");
 byte[] dataOne = new byte[stream.Length];
 stream.Read(dataOne, 0, dataOne.Length);
 FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
 try
 {
 fs.Write(dataOne, 0, dataOne.Length);
 }
 finally
 {
 fs.Close();
 stream.Close();
 }
 _log.WriteLine((totalCount + dataOne.Length).ToString());
 WriteStr("分段数据保存成功");
 }
 private void WriteStr(string str)
 {
 HttpContext.Current.Response.Write(str);
 }
 public bool IsReusable
 {
 get
 {
 return true;
 }
 }

<div class="container">
 <div class="panel panel-default">
 <div class="panel-heading">分段读取文件：</div>
 <div class="panel-body">
 <input type="file" id="file" />
 <br />
 <input type="button" value="中止" onclick="stop();" /> 
 <input type="button" value="继续" onclick="containue();" />
 <br />
 <progress id="progressOne" max="100" value="0" style="width:400px;"></progress>
 <blockquote id="Status" style="word-break:break-all;"></blockquote>
 </div>
 </div>
</div>

/*
* 分段读取文件为blob ，并使用ajax上传到服务器
* 使用Ajax方式提交上传数据文件大小应该有限值，最好500MB以内
* 原因短时间过多的ajax请求，Asp.Net后台会崩溃获取上传的分块数据为空
* 取代方式，长连接或WebSocket
*/
var fileBox = document.getElementById('file');
var reader = null; //读取操作对象
var step = 1024 * 1024 * 3.5; //每次读取文件大小
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
fileBox.onchange = function () {
 //获取文件对象
 file = this.files[0];
 var total = file.size;
 console.info("文件大小：" + file.size);
 var startTime = new Date();
 reader = new FileReader();
 //读取一段成功
 reader.onload = function (e) {
 //处理读取的结果
 var result = reader.result;
 var loaded = e.loaded;
 if (enableRead == false)
 return false;
 //将分段数据上传到服务器
 uploadFile(result, cuLoaded, function () {
 console.info('loaded:' + cuLoaded + '----current:' + loaded);
 //如果没有读完，继续
 cuLoaded += loaded;
 if (cuLoaded < total) {
 readBlob(cuLoaded);
 } else {
 console.log('总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
 cuLoaded = total;
 }
 //显示结果进度
 var percent = (cuLoaded / total) * 100;
 document.getElementById('Status').innerText = percent;
 document.getElementById('progressOne').value = percent;
 });
 }
 //开始读取
 readBlob(0);
 //关键代码上传到服务器
 function uploadFile(result, startIndex, onSuccess) {
 var blob = new Blob([result]);
 //提交到服务器
 var fd = new FormData();
 fd.append('file', blob);
 fd.append('filename', file.name);
 fd.append('loaded', startIndex);
 var xhr = new XMLHttpRequest();
 xhr.open('post', '../ashx/upload2.ashx', true);
 xhr.onreadystatechange = function () {
 if (xhr.readyState == 4 && xhr.status == 200) {
 if (onSuccess)
 onSuccess();
 } else if (xhr.status == 500) {
 //console.info('请求出错，' + xhr.responseText);
 setTimeout(function () {
 containue();
 }, 1000);
 }
 }
 //开始发送
 xhr.send(fd);
 }
}
//指定开始位置，分块读取文件
function readBlob(start) {
 //指定开始位置和结束位置读取文件
 var blob = file.slice(start, start + step);
 reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
 //中止读取操作
 console.info('中止，cuLoaded：' + cuLoaded);
 enableRead = false;
 reader.abort();
}
//继续
function containue() {
 console.info('继续，cuLoaded：' + cuLoaded);
 enableRead = true;
 readBlob(cuLoaded);
}