ajax分片上传,ajax异步实现文件分片上传
$("#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异步实现文件分片上传相关推荐
- plupload分片上传php,plupload 大文件分片上传与PHP分片合并探索
最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...
- element ui upload组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次 后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
- python 大文件分片上传_Python实现大文件分片上传
转载请注明出处:http://blog.csdn.net/jinixin/article/details/77545140 引言想借着这篇文章简要谈谈WebUploader大文件上传与Python结合 ...
- jquery 分片上传php,php 大文件分片上传
前端部分 上传 //上传控件 uploadBig('upload','zip,rar,7z,tar',{ id: '', type: 'upload_file', } ,(res)=>{ //t ...
- fastdfs redis java,大文件上传_断点续传_文件分片传输_fastdfs_前后端一站式解决方案...
大文件上传,断点续传,秒传,fastdfs 项目介绍 实现h5与fastdfs之间的断点续传,大文件上传,秒传 软件架构 软件架构说明 webuploader+springboot+redis+fas ...
- php文件上传代码_PHP实现文件分片上传的实例代码
PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本 ...
- jquery 分片上传php,jquery 大文件分片上传插件 fcup.js
软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装 直接下载源码,上传功能需要php环境,演示地 ...
- php批量上传代码,文件批量上传_php文件上传代码(支持文件批量上传)
摘要 腾兴网为您分享:php文件上传代码(支持文件批量上传),雨课堂版,洋游码头,学堂里,小度等软件知识,以及电脑硬件温度检测软件,日事清app,lol韩服语音包,绝地求生无后座力设置,金山u盘卫士, ...
- GitHub 上传大小限制 大文件无法上传问题!
壹. 首先下载git-lfs 需要配置lfs密钥(注意不是ssh的密钥)的请看https://github.com/git-lfs/git-lfs git lfs install 贰. 安装好后进入本 ...
- elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口(前后端代码版)...
记录时间 2020年10月27日 22点38分 前言 在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
最新文章
- 剖析Focal Loss损失函数: 消除类别不平衡+挖掘难分样本 | CSDN博文精选
- 3d 行为树编辑器_cocos creator主程入门教程——有限状态机和行为树
- jdk动态代理和cglib动态代理的区别
- 信号实现父子进程之间的同步--sigsuspend的作用
- 进阶学习(3.3) Abstract Factory Pattern 抽象工厂模式
- 《微软文档管理解决方案2007》之一:安装部署 - [SharePoint Server]
- 小白学习机器学习---第六章:SVM算法原理(1)
- 微x怎么设置主题_红人堂:抖音直播预告文案怎么写?5个小技巧提高你的文案吸引力!...
- fiddler抓包工具使用技巧
- spark 存入hbase_Spark DataFrame写入HBase的常用方式
- emacs自动连接mysql数据库
- Python3 encode中的unicode-escape和raw_unicode_escape
- AnyMP4 MP3 Converter for Mac(mp3格式转换器)
- word如何让单页变横向
- button 点击的涟漪效果
- 内核线程ksoftirqd
- ANDROID – 單色漸層效果的改良 – GRADIENT SCRIMS(转)
- 机器学习之——什么是Onehot编码?
- do-while语句使用案例
- 2022第七届少儿模特明星盛典 小主持人江姿莹 T台风采展示
热门文章
- 打开旧Flutter项目说:Your Flutter application is created using an older version of the Android embedding
- 水力压裂化学品行业调研报告 - 市场现状分析与发展前景预测
- 中国数字血压计市场趋势报告、技术动态创新及市场预测
- 绝缘端子行业调研报告 - 市场现状分析与发展前景预测
- 2021年中国充油散热器市场趋势报告、技术动态创新及2027年市场预测
- 惠普服务器装Linux7系统,如何安装惠普服务器操作系统
- linux 切换pip路径_【Python基础】PIP 镜像源配置轻松搞定
- Python菜鸟入门:day16编程学习
- 美团遭遇反垄断调查;微信利用社交垄断封杀西瓜视频;Qt 6 for Python发布|极客头条...
- 如果NATv6 是个笑话,那么 IPv6 是什么?