| <script>
$(function(){
let myfile = document.getElementById("myfile");
myfile.onchange = function(){
let file = myfile.files[0]; // 这里可以得到上传的文件对象
let length = 1024 * 1024 * 5; // 这里是每一个分片的大小
let total_number = Math.ceil(file.size/length); // 使用进一法，来确定分片的个数
let start = 0; // 分片的初始位置
let end = length; // 分片的结束位置
let parr = []; // 这里为promise.all方法准备一个数组
for(let i = 1;i<=total_number;i++){
// 这里开始分片，并且把每一个分片上传到服务器
let bolb = file.slice(start,end); // 得到一个分片
start = end; // 调整下一个分片的起始位置
end = start+length; // 调整下一个分片的结束位置
if(end > file.size){
end=file.size; // 这里对最后的一个分片结束位置进行调整
}
let formdata = new FormData(); // 创建一个FormData对象，准备传送数据
formdata.append("file",blob); // 将分片数据放入formdata
formdata.append("tempfilename",i+"_"+file.name); // 同时为这个分片设置一个名称，其中的i帮助后端进行排序处理
// formdata组装好之后，调用pro()函数，返回一个promise对象，并把它放入parr数组中，方便后面的promise.all方法使用
parr.push(pro(formadata));
}
// 以上for循环结束之后，parr数组中就全部是分片上传的promise的对象了，此时我们使用promise.all方法，等待所有上传都成功执行后，再向服务器发送一个请求，也就是上传完成，让服务器组装分片的请求
Promise.all(parr).then(res=>{
if(res.length == parr.length){ // 如果返回成功的数组长度和parr的数组长度相等，说明分片全部上传成功
// 此时对上传接口再次发送请求，同时把上传的文件名带上，方便后台查找要组装的分片文件名，因为是请求同一个上传接口，所以我们还要传一个flag=1表示这是一个数据组装的请求
$.ajax({
type:"post",
url:"http://xxx.com/index/upload/getupload",
data:{flag:1,filename:file.name}, // 这里flag=1表示上传完成，请求组装，filename表示要组成哪一组文件分片
success:function(res){
if(res.length == parr.length){
console.log(111);
}
},
fail: function () {
reject()
}
})
}
})
}
})
// 这个函数用来上传分片文件，返回的是一个promise对象，方便后面使用promise.all还判断所有分片是否是上传成功的
// 这里要说明一下，$.post()是不可以上传文件的，只能用$.ajax()并且要把contentType:false和processData:false带上
function pro(formData){
return new Promise((resolve,reject)=>{
$.ajax({
type:"post",
url:"http://xxx.com/index/upload/getupload", // 后台上传文件的地址
data:formData,
contentType: false, // 这个不能少，ajax上传文件是不能少的
processData: false, // 这个不能少，ajax上传文件必传false
success:function(res){
resolve(res)
},
fail: function () {
reject()
}
})
})
}
</script>
|
