<!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. 最速下降法--MATLAB程序

    function x = fxsteep(f,e,a,b)x1 = a;x2 = b;Q = fxhesson(f,x1,x2);x0 = [x1,x2]';temp = [x0];fx1 = dif ...

  2. frp杀毒软件报毒？

    原文地址:https://wuter.cn/1909.html/ 部分用户下载frp之后,windows defender可能会报毒,并且自动删除内网穿透主程序,导致无法穿透. 首先看一下报毒的原理是 ...

  3. 浅析 TensorFlow Runtime 技术

    关于 TF Runtime 的疑问? 什么是TFRT ? TensorFlow Runtime,简称 TFRT,它提供了统一的.可扩展的基础架构层,可以极致地发挥CPU多线程性能,支持全异步编程(无锁 ...

  4. C#脚本引擎CS-Script

    最近想要在程序中嵌入一个C#脚本引擎,在.NET Framework时代用过一个叫做CS-Script的东西,感觉还是不错,发现现在也支持.NET Core了,试着嵌入一下. 比较 要说能够运行C#脚 ...

  5. 记录第一次使用Vivado——以全加器为例子

    从altera转战xilinx,经典的FPGA到ZYNQ系列,第一站就是先熟悉编译软件Vivado.我就直接跳过软件安装部分了,如有疑问,可以在评论区提出来,我看到了就帮你解答. 首先是是打开界面 然 ...

  6. 痞子衡嵌入式：MCUXpresso IDE下SDK工程导入与workspace管理机制

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是MCUXpresso IDE下SDK工程导入与workspace管理机制. MCUXpresso IDE是恩智浦软件团队倾注很大心血研发 ...

  7. easyui中给table列表中加序号

    $('#xyData_healthList').datagrid({ width: 'auto', height: 'auto', striped: true, fit: true, paginati ...

  8. JavaDailyReports10_17

    学习JavaWeb第一天 输出我的第一个HelloWorld! 1 <%@ page language="java" import="java.util.*&quo ...

  9. 1.简单使用两片74HC595实现动态显示数码管

    本篇文章主要是讲解如何简单示用74HC595,更具体的讲解请移步 https://www.cnblogs.com/lulipro/p/5067835.html#undefined 这篇文章讲解的更加详 ...

  10. 自动化运维工具-Ansible之7-roles

    自动化运维工具-Ansible之7-roles 目录 自动化运维工具-Ansible之7-roles Ansible Roles基本概述 Ansible Roles目录结构 Ansible Roles ...