JQ+asp.net实现文件上传的断点续传功能
一、功能原理
断点续传，顾名思义就是将文件分割成一段段的过程，然后一段一段的传。
以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，我们可以可以使用slice方法来分割文件。
所以断点续传的最基本实现也就是：前端通过FileList对象获取到相应的文件，按照指定的分割方式将大文件分段，然后一段一段地传给后端，后端再按顺序一段段将文件进行拼接。
同时，将传送的进度记录记录到浏览器的缓存中。每次传送数据都更新浏览器的缓存
二、实现过程
1、前端代码
<table id="tbResult" class="table table-normal"> <thead> <tr> <td>序号</td> <td>地图名称</td> <td>地图版本</td> <td>地图类型</td> <td>类型名称</td> <td>创建时间</td> <td style="width:250px;">操作</td> </tr> </thead> <tbody> <tr index="0"> </tr> </tbody> </table>
2、计算文件的大小
// 计算文件大小
var size = file.size > 1024
file.size / 1024 > 1024
? file.size / (1024 * 1024) > 1024
? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
: (file.size / (1024 * 1024)).toFixed(2) + 'MB'
: (file.size / 1024).toFixed(2) + 'KB'
: (file.size).toFixed(2) + 'B';
3、选择文件后显示文件的信息，在模版中替换一下数据
var fileList = "";
var uploadVal = '开始上传';
var files = document.getElementById('myFile').files;
fileCount = files.length;
if (files) {
for (var i = 0, j = files.length; i < j; ++i) {
var file = this.files[i];
// 计算文件大小
var size = file.size > 1024
? file.size / 1024 > 1024
? file.size / (1024 * 1024) > 1024
? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
: (file.size / (1024 * 1024)).toFixed(2) + 'MB'
: (file.size / 1024).toFixed(2) + 'KB'
: (file.size).toFixed(2) + 'B';
// 初始通过本地记录，判断该文件是否曾经上传过
var percent = window.localStorage.getItem(file.name + '_p');
if (percent && percent !== '100.0') {
uploadVal = "继续上传"
}
fileList += "<tr><td>" + file.name + "</td><td>" + file.type + "</td><td>" + size + "</td><td class='upload-progress'>" + percent + "</td><td><div class='upload-item-btn' data-name='" + file.name + "' data-size='" + file.size + "' data-state='default' style='display:none'>" + uploadVal + "</div></td></tr>";
}
}
$("#fileList").append(fileList);
4、不过，在显示文件信息的时候，可能这个文件之前之前已经上传过了，为了断点续传，需要判断并在界面上做出提示通过查询本地看是否有相应的数据（这里的做法是当本地记录的是已经上传100%时，就直接是重新上传而不是继续上传了）
// 初始通过本地记录，判断该文件是否曾经上传过 var percent = window.localStorage.getItem(file.name + '_p'); if (percent && percent !== '100.0') { uploadVal = "继续上传" }
5、显示文件信息列表
6、点击开始上传，可以上传相应的文件
var $this = $(this); var fileName = $this.attr('data-name'); var totalSize = $this.attr('data-size'); var eachSize = 1024 * 1024; var chunks = Math.ceil(totalSize / eachSize); var $progress = $this.closest('tr').find('.upload-progress')
7、接下来是分段过程
// 上传之前查询是否以及上传过分片 var chunk = window.localStorage.getItem(fileName + '_chunk') || 0; chunk = parseInt(chunk, 10); // 判断是否为末分片 var isLastChunk = (chunk == (chunks - 1) ? 1 : 0); // 如果第一次上传就为末分片，即文件已经上传完成，则重新覆盖上传 if (times === 'first' && isLastChunk === 1 && totalSize > eachSize) { window.localStorage.setItem(fileName + '_chunk', 0); chunk = 0; isLastChunk = 0; } // 设置分片的开始结尾 var blobFrom = chunk * eachSize, // 分段开始 blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾 percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分比 timeout = 5000, // 超时时间 fd = new FormData($('#myForm')[0]); fd.append('json', JSON.stringify(record)); // 文件名 fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的文件（实际上传递的就是这个文件） fd.append('fileName', fileName); // 文件名 //fd.append('totalSize', totalSize); // 文件总大小 fd.append('isLastChunk', isLastChunk); // 是否为末段 //fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第一段（第一次上传） fd.append('chunks', chunks); // 总片段 fd.append('chunk', chunk); // 当前片段
8、AJAX上传
$.ajax({ url: serviceBaseUrl + URL.ADD_MapManage, type: 'POST', data: fd, async: true, //cache: false, contentType: false, processData: false }).then(function (res) { // 已经上传完毕 window.localStorage.setItem(fileName + '_p', percent); if (chunk === (chunks - 1)) { $progress.text('上传完毕'); if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) { $('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed'); } uploadCount++; if (uploadCount == fileCount) { swal({ title: "操作成功！", type: "success", text: "2秒后自动关闭。", timer: 2000, showConfirmButton: true }); closeEdit(); } } else { // 记录已经上传的分片 window.localStorage.setItem(fileName + '_chunk', ++chunk); $progress.text(percent + '%'); startUpload(); } })
9、完成的js逻辑如下
//附件选择 $('body').on('change', '#myFile', function (e) { var fileList = ""; var uploadVal = '开始上传'; var files = document.getElementById('myFile').files; fileCount = files.length; if (files) { for (var i = 0, j = files.length; i < j; ++i) { var file = this.files[i]; // 计算文件大小 var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size / (1024 * 1024)).toFixed(2) + 'MB' : (file.size / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; // 初始通过本地记录，判断该文件是否曾经上传过 var percent = window.localStorage.getItem(file.name + '_p'); if (percent && percent !== '100.0') { uploadVal = "继续上传" } fileList += "<tr><td>" + file.name + "</td><td>" + file.type + "</td><td>" + size + "</td><td class='upload-progress'>" + percent + "</td><td><div class='upload-item-btn' data-name='" + file.name + "' data-size='" + file.size + "' data-state='default' style='display:none'>" + uploadVal + "</div></td></tr>"; } } $("#fileList").append(fileList); })
//附件全部上传
$('body').on('click', '#btnSaveAll', function (e) {
// 未选择文件
if (!$('#myFile').val()) {
//$('#myFile').focus();
var fd = new FormData($('#myForm')[0]);
fd.append('json', JSON.stringify(record)); // 文件名
$.ajax({
url: serviceBaseUrl + URL.ADD_MapManage,
type: 'POST',
data: fd,
//async: false,
//cache: false,
contentType: false,
processData: false
}).then(function (res) {
swal({
title: "操作成功！",
type: "success",
text: "2秒后自动关闭。",
timer: 2000,
showConfirmButton: true
});
closeEdit();
})
}
// 模拟点击其他可上传的文件
else {
$('#upload-list .upload-item-btn').each(function () {
$(this).click();
uploadCount = 0;
});
}
})
//文件单个上传功能
$('body').on('click', '.upload-item-btn', function () {
if (inputValidator !== undefined) {
inputValidator.checkValidity();
}
if ($(".validContainer input.invalid").length == 0) {
var $this = $(this);
var fileName = $this.attr('data-name');
var totalSize = $this.attr('data-size');//文件的总大小
var eachSize = 1024 * 1024;//每次上传1M的数据
var chunks = Math.ceil(totalSize / eachSize);//一共多少片段
var $progress = $this.closest('tr').find('.upload-progress')
//var fileCount=document.getElementById('myFile').files;
// 第一次点击上传
startUpload('first');
// 上传操作 times: 第几次
function startUpload(times) {
// 上传之前查询是否以及上传过分片
var chunk = window.localStorage.getItem(fileName + '_chunk') || 0;
chunk = parseInt(chunk, 10);
// 判断是否为末分片
var isLastChunk = (chunk == (chunks - 1) ? 1 : 0);
// 如果第一次上传就为末分片，即文件已经上传完成，则重新覆盖上传
if (times === 'first' && isLastChunk === 1 && totalSize > eachSize) {
window.localStorage.setItem(fileName + '_chunk', 0);
chunk = 0;
isLastChunk = 0;
}
// 设置分片的开始结尾
var blobFrom = chunk * eachSize, // 分段开始
blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾
percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分比
timeout = 5000, // 超时时间
fd = new FormData($('#myForm')[0]);
fd.append('json', JSON.stringify(record)); // 文件名
fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的文件（实际上传递的就是这个文件）
fd.append('fileName', fileName); // 文件名
//fd.append('totalSize', totalSize); // 文件总大小
fd.append('isLastChunk', isLastChunk); // 是否为末段
//fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第一段（第一次上传）
fd.append('chunks', chunks); // 总片段
fd.append('chunk', chunk); // 当前片段
//$progress.text(percent + '%');
$.ajax({
url: serviceBaseUrl + URL.ADD_MapManage,
type: 'POST',
data: fd,
async: true,
//cache: false,
contentType: false,
processData: false
}).then(function (res) {
// 已经上传完毕
window.localStorage.setItem(fileName + '_p', percent);
if (chunk === (chunks - 1)) {
$progress.text('上传完毕');
if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) {
$('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed');
}
uploadCount++;
if (uploadCount == fileCount) {
swal({
title: "操作成功！",
type: "success",
text: "2秒后自动关闭。",
timer: 2000,
showConfirmButton: true
});
closeEdit();
}
} else {
// 记录已经上传的分片
window.localStorage.setItem(fileName + '_chunk', ++chunk);
$progress.text(percent + '%');
startUpload();
}
})
}
}
})
三、后端实现
try { HttpPostedFile file = fileCollection[0]; //二进制数组 byte[] fileBytes = null; fileBytes = new byte[file.ContentLength]; //创建Stream对象，并指向上传文件 Stream fileStream = file.InputStream; //从当前流中读取字节，读入字节数组中 fileStream.Read(fileBytes, 0, file.ContentLength); //全路径（路劲+文件名） string timePath = DateTime.Now.ToString("yyyy") + DateTime.Now.ToString("MM"); string fullPath = path + "Files\\Drones\\" + timePath + "\\" + fileName + "_" + chunk; //保存到磁盘 var fullAllPath = Path.GetDirectoryName(fullPath); //如果没有此文件夹，则新建 if (!Directory.Exists(fullAllPath)) { Directory.CreateDirectory(fullAllPath); } //创建文件，返回一个 FileStream，它提供对 path 中指定的文件的读/写访问。 using (FileStream stream = File.Create(fullPath)) { //将字节数组写入流 stream.Write(fileBytes, 0, fileBytes.Length); stream.Close(); } //最后的片段需要将文件进行合并 if (isLastChunk == "1") { List<string> list = new List<string>(); for (int i = 0; i < Convert.ToInt32(chunks); i++) { //获取所有片段文件的位置 list.Add(path + "Files\\Drones\\" + timePath + "\\" + fileName + "_" + i); } int coutSize = 0; //文件合并 using (FileStream fileNew = new FileStream(path + "Files\\Drones\\" + timePath + "\\" + fileName, FileMode.Create, FileAccess.Write)) { int count = -1; for (int i = 0; i < list.Count; i++) { using (FileStream readStream = new FileStream(list[i], FileMode.Open, FileAccess.Read)) { byte[] buffer = new byte[readStream.Length]; coutSize += buffer.Length; while ((count = readStream.Read(buffer, 0, buffer.Length)) > 0) { fileNew.Write(buffer, 0, count); } } } } //每次航线新增完毕都需要做查询是否有相同ID的数据，如果有就不做添加 var entity = JsonConvert.DeserializeObject<T_DRO_MAPMANAGEEntity>(josn); int retCount = mDAL.GetCount($" ID='{entity.ID}'").Result; if (retCount == 0) { //entity.ID = Guid.NewGuid().ToString(); entity.CHUANGJIAN_SJ = DateTime.Now; entity.STA = "A"; var result = mDAL.AddData(entity, addId: true); } else { entity.STA = "U"; var result = mDAL.UpdateData(entity); } //添加附件实体 T_DRO_MAPFILESEntity mapfile = new T_DRO_MAPFILESEntity(); mapfile.ID = Guid.NewGuid().ToString(); mapfile.FILEPATH = "Files\\Drones\\" + timePath + "\\" + fileName; mapfile.FILESIZE = coutSize.ToString(); mapfile.CREATETIME = DateTime.Now; mapfile.PK_MAP_ID = entity.ID; mapfile.SUFFIX = System.IO.Path.GetExtension(fileName); mapfile.FILENAME = fileName; //mapfile.State = "已完成"; var ret = fDAL.AddData(mapfile, addId: true); //删除片段文件 for (int i = 0; i < list.Count; i++) { //获取所有片段文件的位置 if (File.Exists(list[i])) { File.Delete(list[i]); } } //fDAL return new SerializeJson<int>(Enum.ResultType.succeed, entity.ID, 1).ToString(); } return ""; } catch (Exception ex) { return new SerializeJson<int>(Enum.ResultType.failed, ex.Message, -1).ToString(); }
四、最后的结果如图所
