0

0

HTML5怎样检测上传文件哈希_HTML5文件哈希检测用途【校验】

雪夜

雪夜

发布时间:2026-01-18 16:53:02

|

773人浏览过

|

来源于php中文网

原创

现代浏览器可用filereader与crypto.subtle.digest()前端计算文件sha-256哈希,需将file转arraybuffer后调用digest(),结果转十六进制字符串;大文件应分块处理或使用hash-wasm等库;哈希比对需统一编码格式,其核心用途是去重与一致性校验,而非防篡改。

html5怎样检测上传文件哈希_html5文件哈希检测用途【校验】

HTML5 用 FileReader + crypto.subtle.digest() 计算文件 SHA-256 哈希

现代浏览器(Chrome 80+、Firefox 74+、Edge 79+)原生支持在前端计算文件哈希,无需上传到服务端即可完成校验。核心是组合使用 FileReader 读取二进制数据,再用 crypto.subtle.digest() 计算 SHA-256(或 SHA-1/SHA-512)。注意:digest() 只接受 ArrayBuffer,不能直接传 BlobFile

实操要点:

  • File 对象需先调用 .arrayBuffer()(推荐)或用 FileReader.readAsArrayBuffer() 获取原始字节
  • 必须在 HTTPS 环境或 localhost 下运行,否则 crypto.subtle 会抛 SecurityError
  • 大文件(>500MB)可能触发内存压力,建议分块读取(见下节)
  • SHA-256 是当前推荐,默认输出为 32 字节 Uint8Array,需转为十六进制字符串才便于比对
async function calculateSHA256(file) {
  const buffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

// 使用示例
document.querySelector('#file-input').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (file) {
    const hash = await calculateSHA256(file);
    console.log('SHA-256:', hash); // 如:a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e
  }
});

大文件哈希要避免 file.arrayBuffer() 一次性加载

直接调用 file.arrayBuffer() 会将整个文件载入内存,1GB 文件就占 1GB RAM,极易卡死或被浏览器终止。真实场景中应分块读取 + 流式哈希(类似 Node.jscrypto.createHash)。但浏览器 Web Crypto API 不支持增量 digest,所以需手动拼接分块哈希 —— 这**不等价于整体哈希**,不可用于校验。

正确做法是:用 File.slice() 分段读取,全部加载进内存后一次性调用 digest();或改用第三方库如 spark-md5(仅支持 MD5)或 hash-wasm(支持 WASM 加速的 SHA-256,可流式)。

立即学习前端免费学习笔记(深入)”;

Quinvio AI
Quinvio AI

AI辅助下快速创建视频,虚拟代言人

下载

关键提醒:

  • 不要自己实现“分块异或哈希”或“拼接哈希字符串”,结果与标准 SHA-256 完全不同
  • hash-wasmsha256Multi() 支持传入多个 ArrayBuffer,内部按标准方式处理,等效于整文件哈希
  • 若必须纯原生、无依赖,且文件确定 ≤200MB,仍可用 file.arrayBuffer(),加 loading 提示和 try/catch 防崩溃

哈希值比对失败常见原因:编码、截断、大小写

前端算出的哈希和后端/预存值比对不上?大概率不是算法问题,而是字符串表示不一致。SHA-256 原始结果是 32 字节二进制,转换成字符串时有三种常见变体:

  • hex(小写十六进制,64 字符):最常用,hash-wasm 和多数服务端默认输出
  • hex(大写):Python hashlib.sha256().hexdigest().upper() 会这样,需统一转小写再比对
  • base64:Node.js createHash('sha256').update(buf).digest('base64') 输出 44 字符,含 +//,前端需用 atob() 解码后再 digest —— 但更稳妥的是服务端也返回 hex

另外注意:

  • 某些旧系统截断哈希(如只取前 16 字节),导致长度只有 32 字符,这不是标准 SHA-256
  • 文件内容差异:前端读的是用户选中的 File,而后端收到的可能是经 multipart 解析、重命名、加时间戳后的文件,字节流已不同
  • 换行符归一化:文本文件若在 Windows 上传(CRLF),服务端保存为 LF,哈希必然不同 —— 校验前需确认是否做了 normalize

文件哈希检测的真实用途不是防篡改,而是去重与一致性确认

前端计算哈希**不能替代 HTTPS 传输加密或服务端校验**。它无法防止中间人替换文件内容后再伪造哈希(因哈希本身也走同一通道),也不能防御恶意用户修改本地 JS 绕过计算逻辑。它的实际价值集中在:

  • 上传前快速判断是否已存在相同文件(服务端查哈希索引),避免重复存储
  • 断点续传时验证已上传分片的完整性(配合分片哈希列表)
  • 用户侧确认“我选的这个文件”和服务端最终保存的“那个文件”字节一致(比如医疗影像上传后回显哈希供人工核对)
  • 离线场景下,PWA 缓存资源更新时用哈希识别变更

真正需要防篡改的场景(如固件升级包),必须由可信源签名(RSA/ECDSA),前端验证签名,而非只验哈希。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

550

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

470

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

293

2025.12.30

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

227

2025.12.30

html5空格代码怎么写
html5空格代码怎么写

在HTML5中,空格不能直接通过键盘空格键实现,需使用特定代码。本合集详解常用空格写法:&nbsp;(不间断空格)、&ensp;(半个中文空格)、&emsp;(一个中文空格)及CSS的white-space属性等方法,帮助开发者精准控制页面排版,避免因空格失效导致布局错乱,适用于新手入门与实战参考。

106

2025.12.30

html5怎么做网站教程
html5怎么做网站教程

想从零开始学做网站?这份《HTML5怎么做网站教程》合集专为新手打造!涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础,手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板,快速上手,轻松迈出Web开发第一步!

165

2025.12.31

HTML5建模教程
HTML5建模教程

想快速掌握HTML5模板搭建?本合集汇集实用HTML5建模教程,从零基础入门到实战开发全覆盖!内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能,提供可直接复用的模板结构与代码示例。无需复杂配置,助你高效构建现代网页,轻松上手前端开发!

53

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

71

2025.12.31

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
极致CMS零基础建站教学视频
极致CMS零基础建站教学视频

共62课时 | 6万人学习

如何进行WebSocket调试
如何进行WebSocket调试

共1课时 | 0.1万人学习

传智播客AJAX视频教程
传智播客AJAX视频教程

共31课时 | 6.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号