介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> JS分片上传——极速上传& lt;/title>
& lt;/head>
& lt; body>
& lt;输入类型=癴ile"name=皊lice"id=皊lice"比;
& lt; div id=皁utput"祝辞& lt; !——信息存放地——比;& lt;/div>
& lt; br/比;
& lt;/body>
& lt;脚本src=癶ttp://libs.baidu.com/jquery/1.8.3/jquery.min.js"祝辞& lt;/script>
& lt;脚本类型=拔谋?javascript"比;
$ (“# slice") .change(函数(事件){=$ var文件(“# slice") [0] .files [0];
var=file.name名称;//进行初始化
. ajax({美元
类型:“POST",//请求方式
url:“http://localhost: 8080/getuploadId"
异步:假的,
数据类型:“json"//返回数据类型
数据:{//请求参数
文件名:姓名、
},
成功:功能(数据){//请求成功后
console.log (“data.code=? JSON.stringify(数据);
console.log (“data.data.objectName=? data.data.objectName);
console.log (“data.data.uploadId=? data.data.uploadId);
var objectName=data.data.objectName;
var uploadId=data.data.uploadId;//成功后执行分段上传
PostFile(文件,0,objectName, uploadId);//合并
combineFile (objectName, uploadId);
},
错误:函数(){
alert(“系统出现异常!“);
国旗=false;
}
});
});//执行分片上传
函数PostFile(文件、我objectName, uploadId) {
var name=file.name,//文件名
文件大?４笮?//总大小shardSize=2 * 1024 * 1024,
shardSize=1 * 1024 * 1024,//以2 mb为一个分片,每个分片的大小
shardCount=数学。装天花板(大?shardSize);//总片数
如果我在=shardCount) {
返回;
}//console.log(大小、i + 1 shardSize);//文件总大小,第一次,分片大?/var=我* shardSize开始;
var=开始+ shardSize结束;
var=包文件。片(开始、结束);//将文件进行切片//分段号
var零件编号=i + 1;/*构建表形式单进行提交*/var=new FormData形式();
form.append (“fileId" & # 39; 001 & # 39;)
form.append (“data"、包);//片方法用于切出文件的一部分//form.append (“lastModified" file.lastModified);//最后的额修改时间
form.append (“name"、名称);
form.append (“totalSize"、大小);
form.append (“uploadId" uploadId);
form.append (“objectName" objectName);
form.append (“mainFile"、包);
form.append (“total" shardCount);
form.append (“sortNumber",零件编号);//uploadId: uploadId,//对象名:对象名,//mainFile:团,//总:partCount,//sortNumber:零件编号
如果(shardCount===我+ 1){
——我* shardSize shardSize=大小
}
form.append (“shardSize" shardSize);
form.append (“total" shardCount);//总片数
form.append (“index",我+ 1);//当前是第几片
. ajax({美元//标题:{//web_token:“cpBvqWrr0UK9zPJoKj + 412 alxxcy6qfwrsvoo0juzg0s1jx/sGfMd9oi3AsSxW + MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg=?//},
url:“http://localhost: 8080/multipartupload"
类型:“POST",
数据:形式,//超时:“10000“,//超时10秒
异步:假的,//同步
数据类型:“json"
processData:假的,//很重要,告诉jquery不要对形式进行处理
contentType:假的,//很重要,指定为假才能形成正确的内容类型
成功:功能(数据){
console.log (“data=? JSON.stringify(数据);/*表示上一块文件上传成功,继续下一次*/如果(data.data。代码==1){=& # 39;形式& # 39;;
我+ +;
PostFile(文件、我objectName, uploadId);
如果(data.data}其他。代码==502){=& # 39;形式& # 39;;/*失败后,每2秒继续传一次分片文件*/setInterval(函数(){PostFile(文件、我objectName, uploadId)}, 2000);
如果(data.data}其他。代码==200){
console.log(“上传成功“);
如果(data.data}其他。代码==500){
console.log(& # 39;第& # 39;+ msg.i + & # 39;次,上传文件有误! & # 39;);
其他}{
console.log(& # 39;未知错误& # 39;);
}
}
})
}//合并
函数combineFile (objectName, uploadId) {
console.log (“objectName=? objectName);
console.log (“uploadId=? uploadId);
var=new对象();
object.objectName=对象名;
object.uploadId=uploadId;
. ajax({美元
标题:{
接受:“application/json;charset=utf-8"
},
类型:“POST",//请求方式
url:“http://localhost: 8080/combine"
异步:假的,
contentType:“应用程序/json"
数据类型:“json"//返回数据类型
数据:JSON.stringify(对象),
成功:功能(数据){//请求成功后
console.log (“data=? JSON.stringify(数据);
console.log (“data.data.code=? data.data.code);
console.log (“data.data.url=? data.data.url);
},
错误:函数(){
alert(“系统出现异常!“);
国旗=false;
}
});
}
& lt;/script>
& lt;/html>
这篇文章将为大家详细讲解有关使用ajax如何异步实现分片上传文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>前言
使用ajax上传文件的应用场景颇多,比如上传用户头像,博客文章中插入图片,对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容、下面话不多说了,来一起看看详细的介绍吧
<强>实例代码:
