微客导航 » 文章资讯 » ajax异步实现文件分片上传实例代码

ajax异步实现文件分片上传实例代码

2023-07-12 21:15:03 252

前言

使用Ajax上传文件的应用场景颇多，比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于ajax异步实现文件分片上传的相关内容，下面话不多说了，来一起看看详细的介绍吧

实例代码：





JS分片上传-极速上传

$("#slice").change(function(event){ varfile=$("#slice")[0].files[0]; varname=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); varobjectName=data.data.objectName; varuploadId=data.data.uploadId; //成功后执行分段上传 PostFile(file,0,objectName,uploadId); //合并 combineFile(objectName,uploadId); }, error:function(){ alert("系统出现异常！"); flag=false; } }); }); //执行分片上传 functionPostFile(file,i,objectName,uploadId){ varname=file.name,//文件名 size=file.size,//总大小shardSize=2*1024*1024, shardSize=1*1024*1024,//以2MB为一个分片,每个分片的大小 shardCount=Math.ceil(size/shardSize);//总片数 if(i>=shardCount){ return; } //console.log(size,i+1,shardSize);//文件总大小，第一次，分片大小// varstart=i*shardSize; varend=start+shardSize; varpacket=file.slice(start,end);//将文件进行切片 //分段号 varpartNumber=i+1; /*构建form表单进行提交*/ varform=newFormData(); form.append("fileId",'001') form.append("data",packet);//slice方法用于切出文件的一部分 //form.append("lastModified",file.lastModified);//最后的额修改时间 form.append("name",name); form.append("totalSize",size); form.append("uploadId",uploadId); form.append("objectName",objectName); form.append("mainFile",packet); form.append("total",shardCount); form.append("sortNumber",partNumber); //uploadId:uploadId, //objectName:objectName, //mainFile:blob, //total:partCount, //sortNumber:partNumber if(shardCount===i+1){ shardSize=size-i*shardSize } form.append("shardSize",shardSize); form.append("total",shardCount);//总片数 form.append("index",i+1);//当前是第几片 $.ajax({ //header:{ //web_token:"cpBvqWrr0UK9zPJoKj+412alxxcY6qFwrSVoO0juZg0S1jX/sGfMd9oi3AsSxW+MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg=" //}, url:"http://localhost:8080/multipartupload", type:"POST", data:form, //timeout:"10000",//超时10秒 async:false,//同步 dataType:"json", processData:false,//很重要，告诉jquery不要对form进行处理 contentType:false,//很重要，指定为false才能形成正确的Content-Type success:function(data){ console.log("data="+JSON.stringify(data)); /*表示上一块文件上传成功，继续下一次*/ if(data.data.code==1){ form=''; i++; PostFile(file,i,objectName,uploadId); }elseif(data.data.code==502){ form=''; /*失败后，每2秒继续传一次分片文件*/ setInterval(function(){PostFile(file,i,objectName,uploadId)},2000); }elseif(data.data.code==200){ console.log("上传成功"); }elseif(data.data.code==500){ console.log('第'+msg.i+'次，上传文件有误！'); }else{ console.log('未知错误'); } } }) } //合并 functioncombineFile(objectName,uploadId){ console.log("objectName="+objectName); console.log("uploadId="+uploadId); varobject=newObject(); object.objectName=objectName; object.uploadId=uploadId; $.ajax({ headers:{ Accept:"application/json;charset=utf-8" }, type:"POST",//请求方式 url:"http://localhost:8080/combine", async:false, contentType:"application/json", dataType:"json",//返回数据类型 data:JSON.stringify(object), success:function(data){//请求成功后 console.log("data="+JSON.stringify(data)); console.log("data.data.code="+data.data.code); console.log("data.data.url="+data.data.url); }, error:function(){ alert("系统出现异常！"); flag=false; } }); }

总结

到此这篇关于ajax异步实现文件分片上传的文章就介绍到这了,更多相关ajax异步实现文件分片上传内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

ajax异步实现文件分片上传实例代码

热门推荐

随机推荐