JS分片上传-极速上传

$("#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;

}

});

}

原文:https://www.cnblogs.com/smileZAZ/p/13915543.html

ajax分片上传,ajax异步实现文件分片上传相关推荐

  1. plupload分片上传php,plupload 大文件分片上传与PHP分片合并探索

    最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...

  2. element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。

    问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

  3. python 大文件分片上传_Python实现大文件分片上传

    转载请注明出处:http://blog.csdn.net/jinixin/article/details/77545140 引言想借着这篇文章简要谈谈WebUploader大文件上传与Python结合 ...

  4. jquery 分片上传php,php 大文件分片上传

    前端部分 上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...

  5. fastdfs redis java,大文件上传_断点续传_文件分片传输_fastdfs_前后端一站式解决方案...

    大文件上传,断点续传,秒传,fastdfs 项目介绍 实现h5与fastdfs之间的断点续传,大文件上传,秒传 软件架构 软件架构说明 webuploader+springboot+redis+fas ...

  6. php文件上传代码_PHP实现文件分片上传的实例代码

    PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...

  7. jquery 分片上传php,jquery 大文件分片上传插件 fcup.js

    软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装 直接下载源码,上传功能需要php环境,演示地 ...

  8. php批量上传代码,文件批量上传_php文件上传代码(支持文件批量上传)

    摘要 腾兴网为您分享:php文件上传代码(支持文件批量上传),雨课堂版,洋游码头,学堂里,小度等软件知识,以及电脑硬件温度检测软件,日事清app,lol韩服语音包,绝地求生无后座力设置,金山u盘卫士, ...

  9. GitHub 上传大小限制 大文件无法上传问题!

    壹. 首先下载git-lfs 需要配置lfs密钥(注意不是ssh的密钥)的请看https://github.com/git-lfs/git-lfs git lfs install 贰. 安装好后进入本 ...

  10. elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口(前后端代码版)...

    记录时间 2020年10月27日 22点38分 前言 在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...

最新文章

  1. 剖析Focal Loss损失函数: 消除类别不平衡+挖掘难分样本 | CSDN博文精选
  2. 3d 行为树编辑器_cocos creator主程入门教程——有限状态机和行为树
  3. jdk动态代理和cglib动态代理的区别
  4. 信号实现父子进程之间的同步--sigsuspend的作用
  5. 进阶学习(3.3) Abstract Factory Pattern 抽象工厂模式
  6. 《微软文档管理解决方案2007》之一:安装部署 - [SharePoint Server]
  7. 小白学习机器学习---第六章:SVM算法原理(1)
  8. 微x怎么设置主题_红人堂:抖音直播预告文案怎么写?5个小技巧提高你的文案吸引力!...
  9. fiddler抓包工具使用技巧
  10. spark 存入hbase_Spark DataFrame写入HBase的常用方式
  11. emacs自动连接mysql数据库
  12. Python3 encode中的unicode-escape和raw_unicode_escape
  13. AnyMP4 MP3 Converter for Mac(mp3格式转换器)
  14. word如何让单页变横向
  15. button 点击的涟漪效果
  16. 内核线程ksoftirqd
  17. ANDROID – 單色漸層效果的改良 – GRADIENT SCRIMS(转)
  18. 机器学习之——什么是Onehot编码?
  19. do-while语句使用案例
  20. 2022第七届少儿模特明星盛典 小主持人江姿莹 T台风采展示

热门文章

  1. 打开旧Flutter项目说:Your Flutter application is created using an older version of the Android embedding
  2. 水力压裂化学品行业调研报告 - 市场现状分析与发展前景预测
  3. 中国数字血压计市场趋势报告、技术动态创新及市场预测
  4. 绝缘端子行业调研报告 - 市场现状分析与发展前景预测
  5. 2021年中国充油散热器市场趋势报告、技术动态创新及2027年市场预测
  6. 惠普服务器装Linux7系统,如何安装惠普服务器操作系统
  7. linux 切换pip路径_【Python基础】PIP 镜像源配置轻松搞定
  8. Python菜鸟入门:day16编程学习
  9. 美团遭遇反垄断调查;微信利用社交垄断封杀西瓜视频;Qt 6 for Python发布|极客头条...
  10. 如果NATv6 是个笑话,那么 IPv6 是什么?