基于JS的大文件分片

最新推荐文章于 2025-07-10 09:31:49 发布

Super-Bob

最新推荐文章于 2025-07-10 09:31:49 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： django javascript 大文件上传文件上传前端

本文链接：https://blog.youkuaiyun.com/y734564892/article/details/78481099

项目需要上传超大文件，后台为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