首页 > 其他分享 >基于JS的大文件分片

基于JS的大文件分片

时间:2023-10-22 14:14:13浏览次数:44  
标签:opt function 基于 JS file 分片 var document size

项目需要上传超大文件,后台为DJANGO,不能直接用H5 的FILE API来POST,所以采用slice分片

在分片后为BLOB不能直接传,bolb转file有些浏览器又有支持问题。所以做一些转换,转uint8,uint16,uint32,django的后台处理起来都比较烦

所以试着用base64装入json,很容易搞定。

具体思路:

1.读入文件路径

2.按固定size分片

3.给每个片段加入id,blob的内容提取成base64,json封装

4.js同步post,或者Ajax 异步post json到后台(使用队列防止浏览器卡住),

5.后台收到后拼装(注意文件锁和顺序)

 


前端代码

<!DOCTYPE html>
<head>
<title>yyb</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<style>
#byte_content {
margin: 5px 0;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }
</style>


<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button>send file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>
<script>
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
</script>
<script>
function readBlob(opt_startByte, opt_stopByte,index) {

var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}

var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();

reader.onloadend = function(evt) {

if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_range').textContent =
['send bytes: ', start, ' - ', stop,
' of ', file.size, ' byte file'].join('');
//----------json data
var block_size=opt_stopByte-opt_startByte;
var base64String = btoa(String.fromCharCode.apply(null,new Uint8Array(reader.result)));
//base64 with no gzip if you want to improve you can use gzip compress base64
var send_data={'filename':file.name,'id':index,'blobdata':base64String,'filesize':file.size,'block':block_size};
//-------------ajax start

console.log(send_data);

function sync_send(URL, PARAMS) {

var temp = document.createElement("form");

temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}


function async_send() {
$.ajax({
url: '/upload/',
type: 'post',
data: send_data,
tradition:true,
success: function (data) {
console.log("upload succeed");
if(opt_stopByte<file.size){
readBlob(opt_startByte+block_size,opt_stopByte+block_size,index+1)
}

},
beforeSend: function (xhr, settings) {//set csrf cookie
var csrftoken = getCookie('csrftoken');
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + " : " + errorThrown);
}
});
//---------ajax end
}
async_send('/upload/',send_data);
}
};
if(window.File && window.FileList && window.FileReader && window.Blob) {

} else {
alert('您的浏览器不支持File Api');
}
if(stop>file.size){
stop=file.size;
}
var blob=file.slice(start,stop);

reader.readAsArrayBuffer(blob);

}

document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var o_files = (document.getElementById('files').files);
var o_file=o_files[0];
var block=1024*100;
console.log(o_file.size);
readBlob(0, 0+block,0);
}
}, false);
</script>

 

参考文章:http://blog.ncmem.com/wordpress/2023/10/22/%e5%9f%ba%e4%ba%8ejs%e7%9a%84%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87/

欢迎入群一起讨论

 

标签:opt,function,基于,JS,file,分片,var,document,size
From: https://www.cnblogs.com/songsu/p/17780379.html

相关文章

  • 基于java(ssm)交通事故档案管理系统
    (文章目录)具体实现截图主要功能:基于java(ssm)交通事故档案管理系统系统分为用户和管理员两个角色用户的主要功能有:1.用户注册和登陆系统2.用户查看警察相关信息3.用户查看我的相关事故信息,可以对交通事故进行交通申诉4.用户查看交通申诉审核信息5.退出登陆管理员的主......
  • 基于STM32的物联网节点设计与实现-传感器数据采集与无线通信
    基于STM32微控制器的物联网(IoT)节点的设计和实现。我们讨论物联网节点的基本概念和功能,并详细介绍了STM32微控制器的特点和优势。然后,我们将探讨如何使用STM32开发环境和相关的硬件模块来设计和实现一个完整的物联网节点。最后,我们将提供一个示例代码,展示如何在STM32上实现基本的传......
  • js实现大文件分片上传的方法
    借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData对象的使用Blob对象的使用以下是实现代码,本例中后端代码使用php来实现,只是演示基本功能,具体一些文件验证逻辑先忽略。前段代码:<!DOCTYPEhtml><htmlla......
  • 原生JS实现大文件分片
    为了实现断点续传,研究了js的文件分片实现断点续传的步骤文件分片按顺序上传,上传第一个后文件名md5加密保存到rdis的key,value保存为上传的index,然后下面每次上传成功就更新对应的value,保持最新的第一次上传时,查询redis是否已经存在相同的key,如果相同就跳到保存的index的下一......
  • Vue.js框架:vue3版本引入使用element-ui
    一、引入element-pluselement-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。地址:https://element-plus.gitee.io/在vue3项目终端里使用以下命令引入该依赖:npminstallelement-plus--save二、修......
  • wasm-pack 基于rust 的 WebAssembly 开发工具
    目前基于WebAssembly的应用是越来越多了,同时周边工具以及生成也越来越强大了,wasm-pack是rust周边一个很强大的工具,以下是一个简单的试用参考使用安装 curlhttps://rustwasm.github.io/wasm-pack/installer/init.sh-sSf|sh创建简单项目......
  • nodejs 安装升级解决导入es6语法兼容性问题??=
    nodejs无法识别??==的问题是因为nodejs的版本太老,而引入的模块中包含了新的语法,例如空值运算符??=。这样nodejs就会报错。解决方法大概有三个1,找到对应老版本的模块使用。2,修改模块中不兼容的语法。3,更新nodejs。三个方法中前两个显然会面临大量工作。作为懒人的我,选择了方......
  • 17-基于NE555的信号发生与频率测量
    555定时器的基本应用1.555定时器的简介555定时器是美国Signetics公司1972年研制的用于取代机械式定时器的中规模集成电路,因输入端设计有三个5kΩ的电阻而得名555定时器由于其易用性、低廉的价格和良好的可靠性,在波形的产生与变换、测量与控制、家用电器、电子玩具等领域都得到......
  • 论文:Ultra Fast Deep Lane Detection with Hybrid Anchor Driven Ordinal Classificat
    论文名:UltraFastDeepLaneDetectionwithHybridAnchorDrivenOrdinalClassification混合Anchor驱动顺序分类的超快深车道检测研究问题:研究方法:主要结论:模型:问题:行文结构梳理:Abstrct:现有方法主要集中在(像素分割)+缺陷(复杂场景)+(通过观察)提出一种高效方......
  • 基于SpringBoot与Vue技术的高校毕设管理平台-计算机毕业设计源码+LW文档
    开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9浏览器:谷歌浏览器数据库部分表:DROPTABLEIFEXISTSbisheketi;/*!40101SET@saved_cs_client=@@characte......