这篇文章主要给大家介绍了关于ajax异步实现文件分片上传的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言
使用Ajax上传文件的应用场景颇多,比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容,下面话不多说了,来一起看看详细的介绍吧
实例代码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>JS分片上传-极速上传</title>
</head>
<body>
<input type=”file” name=”slice” id=”slice” >
<div id=”output”><!– 信息存放地 –> </div>
<br/>
</body>
<script src=”
http://libs.baidu.com/jquery/1.8.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(“#slice”).change(function(event) {
var file = $(“#slice”)[0].files[0];
var name = file.name;
//进行初始化
$.ajax({
type:”POST”, //请求方式
url:”http://localhost:8080/getuploadId”,
async: false,
dataType:”json”, //返回数据类型
data:{
fileName:name,
},
success:function(data){ //请求成功后
console.log(“data.code=”+JSON.stringify(data));
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(file,0,objectName,uploadId);
//合并
combineFile(objectName,uploadId);
},
error:function (){
alert(“系统出现异常!”);
flag=false;
}