js实现文件切片上传,断点续传
思路很简单,拿到文件,保存文件唯一性标识,切割文件,分段上传,每次上传一段,根据唯一性标识判断文件上传进度,直到文件的全部片段上传完毕。
以下文字没有完整的代码,只有基础理论,伸手党绕道。
读取文件
var input = document.querySelector('input');
input.addEventListener('change', function() {var file = this.files[0];
});
文件唯一性
var md5code = md5(file);
文件切割
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.addEventListener("load", function(e) {//每10M切割一段,这里只做一个切割演示,实际切割需要循环切割,var slice = e.target.result.slice(0, 10*1024*1024);
});
h5上传一个(一片)文件
var formdata = new FormData();
formdata.append('0', slice);
//这里是有一个坑的,部分设备无法获取文件名称,和文件类型,这个在最后给出解决方案
formdata.append('filename', file.filename);
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function() {//xhr.responseText
});
xhr.open('POST', '');
xhr.send(formdata);
xhr.addEventListener('progress', updateProgress);
xhr.upload.addEventListener('progress', updateProgress);function updateProgress(event) {if (event.lengthComputable) {//进度条}
}
无法获取文件类型的设备解决方案
首先在:http://www.garykessler.net/li...
这里只给出了常见的图片和视频的文件类型判断
function checkFileType(type, file, back) {/*** type png jpg mp4 ...* file input.change=> this.files[0]* back callback(boolean)*/// http://www.garykessler.net/library/file_sigs.htmlvar args = arguments;if (args.length != 3) {back(0);}var type = args[0]; // type = '(png|jpg)' , 'png'var file = args[1];var back = typeof args[2] == 'function' ? args[2] : function() {};if (file.type == '') {// 如果系统无法获取文件类型,则读取二进制流,对二进制进行解析文件类型var imgType = ['ff d8 ff', //jpg'89 50 4e', //png'0 0 0 14 66 74 79 70 69 73 6F 6D', //mp4'0 0 0 18 66 74 79 70 33 67 70 35', //mp4'0 0 0 0 66 74 79 70 33 67 70 35', //mp4'0 0 0 0 66 74 79 70 4D 53 4E 56', //mp4'0 0 0 0 66 74 79 70 69 73 6F 6D', //mp4'0 0 0 18 66 74 79 70 6D 70 34 32', //m4v'0 0 0 0 66 74 79 70 6D 70 34 32', //m4v'0 0 0 14 66 74 79 70 71 74 20 20', //mov'0 0 0 0 66 74 79 70 71 74 20 20', //mov'0 0 0 0 6D 6F 6F 76', //mov'4F 67 67 53 0 02', //ogg'1A 45 DF A3', //ogg'52 49 46 46 x x x x 41 56 49 20', //avi (RIFF fileSize fileType LIST)(52 49 46 46,DC 6C 57 09,41 56 49 20,4C 49 53 54)];var typeName = ['jpg','png','mp4','mp4','mp4','mp4','mp4','m4v','m4v','mov','mov','mov','ogg','ogg','avi',];var sliceSize = /png|jpg|jpeg/.test(type) ? 3 : 12;var reader = new FileReader();reader.readAsArrayBuffer(file);reader.addEventListener("load", function(e) {var slice = e.target.result.slice(0, sliceSize);reader = null;if (slice && slice.byteLength == sliceSize) {var view = new Uint8Array(slice);var arr = [];view.forEach(function(v) {arr.push(v.toString(16));});view = null;var idx = arr.join(' ').indexOf(imgType);if (idx > -1) {back(typeName[idx]);} else {arr = arr.map(function(v) {if (i > 3 && i < 8) {return 'x';}return v;});var idx = arr.join(' ').indexOf(imgType);if (idx > -1) {back(typeName[idx]);} else {back(false);}}} else {back(false);}});} else {var type = file.name.match(/\.(\w+)$/)[1];back(type);}
}
调用方法
checkFileType('(mov|mp4|avi)',file,function(fileType){// fileType = mp4,// 如果file的类型不在枚举之列,则返回false
});
上面上传文件的一步,可以改成:
formdata.append('filename', md5code+'.'+fileType);
总结:有了切割上传,有了文件唯一标识信息(文件md5)断点续传只不过是后台的一个小小的判断逻辑而已。
未来,前端,大有可为
有些小伙伴不是太清楚后台的小小的判断是怎么做的:
这里贴一张图给大家参考,自己手画,有点丑,将就下。
后续我再画一张完整的上传流程图给更新上来。
js实现文件切片上传,断点续传相关推荐
- js实现文件切片上传,断点续传 1
原作者文章地址 断点续传:顾名思义,继续上次断开的点,继续上传. 思路整理: 拿到文件,对文件进行fingerprint = md5(file),得到文件指纹. 将指纹保存服务器. 切割文件,分段上传 ...
- Springboot + Vue实现大文件切片上传
Springboot + Vue实现大文件切片上传 大文件切片上传原理就是将一个大文件分成若干份大小相等的块文件,等所有块上传成功后,再将文件进行合并. 一.Springboot后端 1.实体TChu ...
- minio实现大文件分片上传+断点续传+预览
minio实现大文件分片上传+断点续传+预览 只提供后端java代码 思路: 前端分片 校验文件md5是否已经存在 --不存在创建临时桶存分片 校验分块是否已经上传 分块上传 合并分块 校验合成后md ...
- js文件分片上传,断点续传
前言 文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上 ...
- 网页文件分片上传,断点续传
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
- Web文件分片上传,断点续传
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
- js php 分段上传文件,php+js实现文件分块上传
咱们在上传大文件时,可能会因为服务器的缘由致使文件上传失败,文件过大时因为服务器的配置或响应事件过长致使上传文件失败,这时候咱们能够将一个大的文件分为若干块,而后分批次上传到服务端,当全部文件块上传完 ...
- vue实现大文件分片上传断点续传并展示上传进度条
最近有一个上传视频到服务器的功能,然后发现视频太大了,比如1个G的视频文件基本都是上传失败的,我之前都是上传阿里云的,所以面对大文件上传服务器就做了分片上传和断点续传. 首先解释什么是分片上传:比如一 ...
- 大文件切片上传、视频切片上传转m3u8播放
一.故事 前不久干项目,涉及到在线学习,简单来说就是对文章.视频进行在线学习,这个时候问题出现了,就是在上传视频的时候,速度很是慢,除此之外,视频播放也是卡的鸭皮,然后就开始疯狂网上搜刮知识,最终解决 ...
最新文章
- 刻意练习:LeetCode实战 -- 不同的二叉搜索树
- 什么是AWS Lambda?
- Window对象的判定方法
- linux shell 指定端口 杀进程 结束进程
- 机器学习与数据挖掘网上资源搜罗——良心推荐
- linux编译lua,Linux CentOS 编译LUA。。搞半天终于对了= =
- 有哪些py写的黑科技_2020年汽车界又新增了哪些值得一提的黑科技产品?
- HDU 5489 Removed Interval
- 手写一个二级选择框联动
- 用习惯了windows系统要怎样去认识linux系统(一)
- Nginx凭啥子并发数可以达到3w!
- ai进入轮廓模式怎么退出_AI 绘图工具里,我不知道按了什么键一保存都是轮廓了!怎么办!怎样恢复呢?...
- 【杨中科解惑】我该怎么选择?选择就是放弃
- pytorch 预训练模型
- 设计模式学习总结系列应用实例
- coreldraw x4被禁用怎么办,cdr非法产品详细x4解决教程
- Vue—使用canvas实现电子签名
- Aliyun短信服务集成
- 逐行读txt文件(读写文件try catch finally 处理空行,编码格式,文件流释放问题,处理读到重复问题)
- “博客大巴”等博客网站昨日发生大规模页面挂马