基于JS的大文件分片

最新推荐文章于 2025-06-30 11:49:23 发布

原创

最新推荐文章于 2025-06-30 11:49:23 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#django #javascript #大文件上传 #文件上传 #前端

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