如何监听分块上传进度
JavaScript方法完整代码
function gisModelUpload() {
// 接口名
var interfaceName = $("#modelFileType").val();
// url地址
var url = $("#url").val();
// token
var token = $("#token").val();
// 大文件切块
var bytesPerPiece = 2048 * 4096; // 每个文件切片大小定为8MB
var totalPieces; //总数
var blob = document.getElementById("modelFile").files[0];
var start = 0;
var end;
var index = 0; //分块索引
var filesize = blob.size;
var filename = blob.name;
var parameter = {
Name: "name",
LightweightName: "",
InitiatingUser: "admin",
UniqueCode: "customize",
Priority: "202",
ModelUploadUrl: "",
OtherInfo: "",
};
//计算文件切片总数
totalPieces = Math.ceil(filesize / bytesPerPiece);
while (start < filesize) {
end = start + bytesPerPiece;
if (end > filesize) {
end = filesize;
}
var chunk = blob.slice(start, end); //切割文件chunk=>分块文件流
var formData = new FormData();
formData.append("file", chunk, filename);
formData.append("chunk", index);
formData.append("chunks", totalPieces);
formData.append("input", JSON.stringify(parameter));
var settings = {
url: "http://" + url + interfaceName,
method: "POST",
timeout: 0,
async: false,
headers: {
Token: token,
},
processData: false,
mimeType: "multipart/form-data",
contentType: false,
data: formData,
// 监听上传状态
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var progressRate = (e.loaded / e.total) * 100 + "%";
console.log(e.loaded);
$("#plan").css("width", progressRate);
});
return xhr;
},
};
$.ajax(settings).done(function (response) {
$("#modelUploadFile").modal("hide");
var uploadResult = JSON.parse(response);
parameter.LightweightName = uploadResult.datas.lightweightName;
console.log(uploadResult);
var datas = uploadResult.datas;
var pageResult = document.getElementById("resultOutput");
pageResult.innerHTML = JSON.stringify(datas);
});
start = end;
index++;
}
}
监听没数据，普通上传好的，分块上传该如何监听呢？
// 监听上传状态
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (e) {
var progressRate = (e.loaded / e.total) * 100 + "%";
console.log(e.loaded);
$("#plan").css("width", progressRate);
});
return xhr;
}
