在处理大文件上传时，如果直接把整个文件读入内存计算MD5，几百MB甚至几个GB的文件会让浏览器瞬间卡顿甚至崩溃。为了获得流畅的交互体验，前端通常采用切片方案：将文件按固定大小切成多个Blob片段，逐片读取、增量更新哈希，最终合并出完整的MD5值。这样内存占用始终只维持在一个切片的大小，进度条也能随切片推进而平滑变化。基于这一思路，jQuery负责文件选择、按钮状态、进度展示和秒传结果反馈等UI交互，而MD5计算则交给SparkMD5库完成。下面结合完整代码说明具体实现。
一、为什么必须切片而不是整文件读取
前端计算文件MD5时，最直接的做法是使用FileReader.readAsArrayBuffer一次性读取整个文件。这种方式在处理小文件时没有问题，但文件体积一旦超过几百MB，浏览器需要为整个文件分配连续的ArrayBuffer内存，很容易触发内存不足或页面无响应。更麻烦的是，MD5计算本身是CPU密集型操作，如果读取完成后再同步计算，主线程会被长时间占用，按钮点击、进度更新等交互全部冻结。
切片方案的核心思想是利用Blob.prototype.slice把文件切割成固定大小的片段，例如每个切片5MB或10MB。每次只读取一个切片，然后调用SparkMD5的append方法增量更新哈希状态。读取完一个切片后，可以立即更新进度条，并且通过setTimeout或requestAnimationFrame把控制权交还给浏览器，让UI有机会刷新。计算完成后调用SparkMD5.ArrayBuffer实例的end方法得到最终MD5值。这样的设计既保证了内存可控，又让进度反馈变得可行。
切片大小需要根据实际场景调整。如果切片太小，会导致FileReader触发次数过多，增加整体耗时；如果切片太大，单次读取和计算仍然可能造成短时间卡顿。常见做法是选择2MB到10MB之间的值，既兼顾速度，又避免明显的界面停顿。另外，切片计算MD5也为后续的断点续传、分片上传提供了基础，因为每个切片的哈希可以独立记录。
二、jQuery实现文件选择与切片读取
UI部分需要准备文件选择控件、开始按钮、取消按钮、进度条和状态提示区域。HTML结构并不复杂，核心是使用<input type="file">让用户选择文件，并用一个嵌套的<div>模拟进度条。引入jQuery和SparkMD5后，所有交互都可以通过jQuery的事件绑定来组织。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大文件切片MD5计算</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
</head>
<body>
<input type="file" id="fileInput">
<button id="startBtn" disabled>计算MD5</button>
<button id="cancelBtn" disabled>取消</button>
<div class="progress-wrap">
<div id="progressBar"><span></span></div>
<div id="progressText">0%</div>
</div>
<div id="status">请选择文件</div>
</body>
</html>
这段结构里，startBtn初始为禁用状态，只有选择了文件后才允许点击。进度条通过内部span的宽度百分比来展示，状态文本则用来告知用户当前处于选择、计算中、完成或失败等阶段。jQuery在这里的作用非常直接：监听change事件获取文件对象，监听click事件启动计算，并且在读取切片的过程中不断更新span的宽度和进度文字。
启动计算后，核心逻辑是通过递归调用读取下一个切片。每次读取前根据当前索引计算切片的起始位置和结束位置，然后调用file.slice(start, end)得到Blob片段。接着创建一个新的FileReader实例，绑定onload事件，在事件回调中把读取到的ArrayBuffer追加到SparkMD5实例中。每一个切片读取完成后，更新当前索引和进度百分比，再通过setTimeout安排下一个切片的读取，这样主线程就有机会处理渲染任务。
$(function() {
var fileInput = $('#fileInput');
var startBtn = $('#startBtn');
var cancelBtn = $('#cancelBtn');
var progressBar = $('#progressBar span');
var progressText = $('#progressText');
var status = $('#status');
var file = null;
var chunkSize = 5 * 1024 * 1024; // 5MB
var currentChunk = 0;
var chunks = 0;
var spark = null;
var cancelled = false;
fileInput.on('change', function() {
file = this.files[0];
if (!file) return;
currentChunk = 0;
chunks = Math.ceil(file.size / chunkSize);
spark = new SparkMD5.ArrayBuffer();
cancelled = false;
startBtn.prop('disabled', false);
status.text('已选择文件：' + file.name);
progressBar.css('width', '0%');
progressText.text('0%');
});
startBtn.on('click', function() {
if (!file) return;
startBtn.prop('disabled', true);
cancelBtn.prop('disabled', false);
status.text('正在计算MD5...');
readNextChunk();
});
cancelBtn.on('click', function() {
cancelled = true;
startBtn.prop('disabled', false);
cancelBtn.prop('disabled', true);
status.text('已取消');
});
function readNextChunk() {
if (cancelled || currentChunk >= chunks) {
if (!cancelled) finishHash();
return;
}
var start = currentChunk * chunkSize;
var end = Math.min(start + chunkSize, file.size);
var slice = file.slice(start, end);
var reader = new FileReader();
reader.onload = function(e) {
if (cancelled) return;
spark.append(e.target.result);
currentChunk++;
var percent = Math.floor(currentChunk / chunks * 100);
progressBar.css('width', percent + '%');
progressText.text(percent + '%');
// 使用 setTimeout 避免长时间占用主线程
setTimeout(readNextChunk, 0);
};
reader.onerror = function() {
status.text('读取切片失败');
};
reader.readAsArrayBuffer(slice);
}
function finishHash() {
var md5 = spark.end();
status.text('MD5计算完成：' + md5);
checkInstantUpload(md5);
}
function checkInstantUpload(md5) {
$.ajax({
url: '/api/check-md5',
method: 'POST',
data: JSON.stringify({ md5: md5, name: file.name, size: file.size }),
contentType: 'application/json',
success: function(res) {
if (res.exists) {
status.text('秒传成功');
progressBar.css('width', '100%');
progressText.text('100%');
} else {
status.text('需要上传完整文件');
}
},
error: function() {
status.text('秒传校验失败，请手动上传');
}
});
}
});
上面代码里，取消按钮通过设置cancelled标志来终止后续读取。因为FileReader的读取操作是异步的，已经发出的读取无法撤回，但可以在onload回调中检查标志，避免继续追加数据。进度百分比使用Math.floor取整，防止出现小数位导致UI抖动。整体结构清晰，事件处理都集中在jQuery的$(function(){...})中，符合传统jQuery项目的组织方式。
三、MD5增量计算与并发控制细节
SparkMD5提供了SparkMD5.ArrayBuffer构造函数，专门用于处理ArrayBuffer类型的数据。每次调用append时传入一个切片的ArrayBuffer，SparkMD5会在内部维护哈希计算的中间状态。需要注意的是，append方法不会复制数据，它假设传入的ArrayBuffer在后续操作中不会被修改。由于每个切片读取完成后立即追加，并且该ArrayBuffer仅在当前回调中使用，所以不会产生数据竞争或引用问题。
递归加setTimeout的方案是最容易理解的，但也有一些可以优化的空间。如果只是简单地循环读取而不让出主线程，浏览器会在所有切片处理完后才统一渲染，进度条看起来会从0%直接跳到100%。通过setTimeout(...,0)将下一次读取放到任务队列，能够让浏览器在两次读取之间处理渲染事件，保证进度实时更新。还可以使用requestAnimationFrame来调度，但这在兼容性上略逊于setTimeout，而且它通常用于动画场景，这里更多只是为了让出主线程。
错误处理方面，FileReader的onerror事件可能因为文件被修改、权限不足或磁盘读取失败而触发。代码中只是简单提示读取切片失败，但在真实项目中，应该根据错误类型决定是否重试，或者给出更明确的引导。如果用户在选择文件后修改了本地文件，切片读取可能会抛出NotReadableError，这时可以提示用户重新选择文件。另一个容易忽略的点是file.slice的兼容性，旧版浏览器可能使用file.webkitSlice或file.mozSlice，不过现代浏览器已经普遍支持标准方法。
四、秒传校验接口交互与后续优化
当MD5计算完成后，需要向后端发送一个校验请求，询问该文件是否已经存在。通常接口会接收MD5值、文件名和文件大小，后端根据MD5在文件存储系统中查找。如果存在，直接返回秒传成功，前端就可以跳过实际上传，把进度条置为100%；如果不存在，前端再走正常的文件上传逻辑。上面代码中使用$.ajax发送JSON数据，contentType设置为application/json，后端需要按JSON格式解析。
秒传功能的核心价值在于节省带宽和用户时间，特别是对于重复上传相同文件的场景，比如网盘、图床或素材管理后台。但秒传判断也可能带来误判风险，如果后端只比对MD5而忽略文件大小或业务维度，可能产生哈希碰撞。因此生产环境中建议至少同时校验MD5、文件大小和业务标识，必要时再加一层SHA256校验。对于超大文件，MD5计算本身也有耗时，可以把计算过程放到Web Worker中，让主线程完全不参与哈希运算，进一步提升页面流畅度。
除了MD5秒传，切片计算还天然适合后续的分片上传和断点续传。例如，上传每一片时后端可以记录该片的MD5或偏移量，如果网络中断，下次可以只上传缺失的切片。结合jQuery的$.ajax或原生fetch，可以逐片上传并在每个切片上传成功后更新进度。总体来说，切片计算MD5是前端大文件处理的基础能力，掌握它之后，再叠加并发上传、秒传校验、断点续传等能力会更加顺畅。本文给出的代码已经覆盖了最核心的UI交互和计算流程，可以作为实际项目的起点。