欢迎光临
我的个人博客网站

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; 		                }     					});  		              });     //执行分片上传     function PostFile(file,i,objectName,uploadId){         var name = 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);  //文件总大小,第一次,分片大小//         var start = i * shardSize;         var end = start + shardSize;         var packet = file.slice(start, end);  //将文件进行切片 		// 分段号 		var partNumber = i + 1;         /*  构建form表单进行提交  */         var form = new FormData();         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);                 } else if (data.data.code == 502) {                     form = '';                     /*  失败后,每2秒继续传一次分片文件  */                     setInterval(function () { PostFile(file, i,objectName,uploadId) }, 2000);                 } else if (data.data.code == 200) {                     console.log("上传成功");                 } else if (data.data.code == 500) {                     console.log('第'+msg.i+'次,上传文件有误!');                 } else {                     console.log('未知错误');                 }             }         })     } 	//合并 	function combineFile(objectName,uploadId){ 			console.log("objectName="+objectName); 			console.log("uploadId="+uploadId); 			var object=new Object(); 			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; 					}     				}); 					 	 	 	} 	 </script> </html>

转载于:https://blog.csdn.net/likun1239656678/article/details/109432560?utm_medium=distribute.pc_category.none-task-blog-hot-13.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-13.nonecase

赞(0) 打赏
未经允许不得转载:张拓的天空 » ajax异步实现文件分片上传
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏