0

0

HTML5如何上传二进制数据_HTML5二进制数据上传法【数据】

絕刀狂花

絕刀狂花

发布时间:2026-01-17 20:24:09

|

261人浏览过

|

来源于php中文网

原创

最稳妥的二进制文件上传方式是 FormData + fetch/XMLHttpRequest;纯二进制数据则用 ArrayBuffer/Uint8Array/Blob 直接作 body 并设 Content-Type;禁用 base64 传输,避免膨胀与解码错误。

html5如何上传二进制数据_html5二进制数据上传法【数据】

FormData 上传二进制文件最稳妥

绝大多数场景下,直接用 FormData + XMLHttpRequestfetch 是最可靠的方式。它自动处理 Content-Type、边界符(boundary)、编码,且兼容所有现代浏览器

  • 选中 后,从 files[0] 拿到 BlobFile 对象
  • 新建 FormData,调用 .append("file", file),键名按后端要求填写
  • fetch 不需手动设 Content-Type —— 浏览器会自动生成带 boundarymultipart/form-data
  • 若用 XMLHttpRequest,也**不要**手动设 Content-Type,否则会禁用自动 boundary 生成
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
  const file = input.files[0];
  const formData = new FormData();
  formData.append('upload', file); // 键名必须和后端约定一致

  await fetch('/api/upload', {
    method: 'POST',
    body: formData // 不要加 headers: { 'Content-Type': ... }
  });
});

想传纯二进制(非文件)?用 ArrayBuffer + fetchbody

如果数据来自 canvas.toBlob()WebAssembly 内存、或已解析的 ArrayBuffer,不需要走 FormData。这时应显式指定 Content-Type,并把二进制数据作为 body 直接发送。

  • ArrayBufferUint8ArrayBlob 都可直接赋给 fetchbody 选项
  • 务必设置 headers: { 'Content-Type': 'application/octet-stream' } 或其他具体类型(如 image/png
  • 后端收到的是原始字节流,不是 multipart,解析方式完全不同
  • 注意:Safari 对 ArrayBufferbody 的支持从 iOS 16.4 / macOS 13.3 才稳定,旧版本建议转成 Uint8Array
const buffer = new ArrayBuffer(1024);
const view = new Uint8Array(buffer);
// ... 填充数据

await fetch('/api/binary', {
  method: 'POST',
  headers: { 'Content-Type': 'application/octet-stream' },
  body: view // 或 buffer,或 new Blob([buffer])
});

XMLHttpRequest 上传时设 responseType = 'arraybuffer' 是为了接收返回的二进制

上传二进制本身不依赖 responseType,但如果你上传后期待服务器返回一个二进制响应(比如生成的 PDF、压缩包),就必须提前设置 xhr.responseType = 'arraybuffer',否则 xhr.response 会是乱码字符串或 null。

仿M18紫色版整站 For SHOPEX
仿M18紫色版整站 For SHOPEX

SHOPEX仿M18紫色版 ,适合综合商城,服饰商城.化妆品商城等使用.程序基于SHOPEX4.8.5 最新版制作. 安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.php 数据库连接信息.4.登陆

下载
  • 仅影响响应体解析方式,不影响上传过程
  • 设为 'arraybuffer' 后,xhr.responseArrayBuffer;设为 'blob' 则是 Blob
  • 不能设成 'json'''(空字符串)来接收二进制,会强制转字符串导致损坏

常见错误:把 base64 字符串当二进制直接发

有人把图片转成 data:image/png;base64,...,然后试图把它整个塞进 FormDatabody —— 这不是二进制,是文本,体积膨胀约 33%,后端还得额外解码,还容易因 URL 编码或换行符出错。

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

  • 正确做法:用 fetch(dataUrl) 获取 Blob,或用 atob() + Uint8Array 手动还原(仅限小数据)
  • 更推荐:前端就保持原始 BlobFile,避免无谓的 base64 编解码
  • 如果后端强制要求 base64,那应在最后一步再编码,且注意去掉 data:...;base64, 前缀
二进制上传的关键不在“怎么发”,而在“发什么”——确认你手里的数据是 BlobArrayBuffer 还是字符串,再选对应路径。很多人卡住,是因为把 FileReader.result 当成二进制用了,其实它默认是字符串。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

412

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

533

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

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

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

505

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的相关内容,可以阅读本专题下面的文章。

427

2024.03.06

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

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

20

2025.12.30

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

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

15

2025.12.30

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

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

精品课程

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

共62课时 | 5.4万人学习

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

共1课时 | 0.1万人学习

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

共31课时 | 6.1万人学习

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

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