<!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

ajax异步实现文件分片上传的更多相关文章

  1. 以寡治众各个击破，超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...

  2. Webuploader 大文件分片上传

    百度Webuploader 大文件分片上传(.net接收)   前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...

  3. .NET Core Web APi大文件分片上传研究

    前言 前两天发表利用FormData进行文件上传,然后有人问要是大文件几个G上传怎么搞,常见的不就是分片再搞下断点续传,动动手差不多也能搞出来,只不过要深入的话,考虑的东西还是很多.由于断点续传之前写 ...

  4. Vue2.0结合webuploader实现文件分片上传

    Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...

  5. asp.net 文件分片上传

    最近在研究文件上传,里面的门道还是挺多的,网上大多数文章比较杂乱,代码都是片段,对于新手小白来说难度较高,所以在此详细写一下今天看到的一个demo,关于文件分片上传的. <!DOCTYPE ht ...

  6. 利用blob对象实现大文件分片上传

    首先说分片上传,我们在进行文件上传的时候,因为服务器的限制,会限制每一次上传到服务器的文件大小不会很大,这个时候我们就需要把一个需要上传的文件进行切割,然后分别进行上传到服务器. 假如需要做到这一步, ...

  7. js实现大文件分片上传的方法

    借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData 对象的使用Blob 对象的使用以下是实现代码, ...

  8. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

  9. thinkphp+webuploader实现大文件分片上传

    大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档:http://fex.baidu.com/webu ...

随机推荐

  1. Java基础:String类详解,案例用户登录实现,案例手机号截取实现,案例敏感词替换实现;StringBuilder类详解,StringBuilder和String相互转换,附练习案例.

    1.API 1.1 API概述-帮助文档的使用 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK ...

  2. 探究虚拟dom与diff算法

    一.虚拟DOM (1)什么是虚拟DOM? vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息,如下图:   可见左边的DOM结构,不论是标签名 ...

  3. matplotlib学习日记（十）-划分画布的主要函数

    (1)函数subplot()绘制网格区域中的几何形状相同的子区布局 import matplotlib.pyplot as plt import numpy as np '''函数subplot的介绍 ...

  4. Unity UI适配 之 GridLayoutGroup组件下的内容适配（进度条适配）

    好久没有更新博客了,蓝廋啊. 今天写一写关于GripLayoutGroup组件的屏幕适配问题,以在ARPG游戏中常用的经验条适配来举例子,以此来加深自己的记忆,以便在下次需要制作该功能时能够快速完成. ...

  5. 【kinetic】操作系统探索总结（六）使用smartcar进行仿真

    p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: justify } a:link { color: r ...

  6. Object[] cannot be converted to String[]

    原因: 你应该是想把List数组转 String数组吧! 然后想当然的调用list.toArray()方法. 结果 该方法返回的是Object[]数组,导致类型不匹配! 解决办法: 还在乖乖的用循环吧 ...

  7. JDBC删除

    1 if(conn != null){ 2 String temps="3"; 3 conn.setAutoCommit(false); 4 PreparedStatement p ...

  8. 【NC基础操作】开发环境配置初体验

    当我们拿到开发工具UAP-STUDIO-6.5.0.2和Home文件的时候,意味着我们可以用这两样东西开始进行项目开发了(默认其他准备已就绪). 运行UAP-STUDIO-6.5.0.2 双击进入&q ...

  9. python安装库报错的处理方法

    在安装python map库时遇到了还多问题,找了好的方法都没有安装成功,最后改安装basemap库参考了了:https://www.jb51.net/article/147780.htm一文操作,最 ...

  10. java操作hive和beeline的使用

    一.java操作hive 1.启动服务:hiveserver2,让hive开启与外部连接的服务 nohup hiveserver2 1>/dev/null 2>/dev/null & ...