利用FileReader进行二进制文件传输
一、读取本地二进制文件,上传(数据库文件为例)
二进制文件读取的时候应当直接读取成字节数组,以免在调试时造成误解。比如数据库文件里面的有些字段是utf8编码,因此,采用utf-8编码读出来也能看到一些数据,但任然不应该用指定编码的格式读取。
web端
先读取到ArrayBuffer,在获取ArrayBuffer的Uint8Array字节数组形式,最后用base64编码字节数组用于传输。
var reader = new FileReader();//这是核心,读取操作就是由它完成.
reader.readAsArrayBuffer(selectedFile);//读取文件的内容
reader.onload = function () {
//当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
var file = this.result;//arraybuffer对象(有3种表示方法)
var view = new Uint8Array(file);//提取二进制字节数组,使用Uint8Array表示
console.log("读取");
console.log(binary2base64(view));//base64编码,binary2base64自定义与下文,功能为返回二进制数组的base64编码字符串
}
//二进制字节数组转base64编码的字符串
function binary2base64(bi) {
let str = '';
for (let i = 0, len = bi.length; i < len; i++) {
str += String.fromCharCode(bi[i]);
}
return btoa(str);
}
服务器端
将字符串解码成字节数组再写入文件
//假设已经从Request请求中获得了上传的文件dbfile
public void CreateDB(string dbfile)
{
//创建空文件用于写入数据库
string path = $@"dbfile.db";
File.Create(path).Dispose(); //解码base64数据为二进制字节数组
byte[] file=Convert.FromBase64String(dbfile)); //写入数据库
File.WriteAllBytes(path, file);
}
二、二进制文件下载
服务器端
直接读取文件到字节数组,在编码为base64字符串,传输到web端
public string outPortDB()
{
string path="dbfile.db";
//对于二进制文件,直接读取二进制数据
byte[] file = File.ReadAllBytes(path); //base64编码
string fileStr = Convert.ToBase64String(file);
return fileStr;
}
web端
将字符串解码成字节数组,再模拟点击下载
$.ajax({
url: "...",
type: "post",
data: { ... },
success: function (data) {
//base64解码成二进制字节数组
//base64ToArrayBuffer将字符串解码转换成字节数组,定义在下文
var file = new Blob([base64ToArrayBuffer(data)]);
// 通过a标签把内容下载到本地
var obj = window.URL.createObjectURL(file);
var btn = document.createElement("a");
btn.download = "dbfile.db";
btn.href = obj;
btn.click();
},
error: function (data) {
alert("下载失败");
}
});
//base64转二进制字节数组
function base64ToArrayBuffer(base64) {
//先解码成字符串(utf8编码表示)
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
//获取每个字符的实际二进制字节
bytes[i] = binary_string.charCodeAt(i);
}
//实际上返回的是ArrayBuffer对象
return bytes.buffer;
}
利用FileReader进行二进制文件传输的更多相关文章
- 利用PHP取二进制文件头判断文件类型
<?php $files = array('D:\no.jpg', 'D:\no.png','D:\no2.JPEG','D:\no.BMP'); $fileTypes = array( 779 ...
- html5中利用FileReader来读取文件。
利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...
- WebService之Axis2(4):二进制文件传输
在<WebService大讲堂之Axis2(2):复合类型数据的传递>中讲过,如果要传递二进制文件(如图像.音频文件等),可以使用byte[]作为数据类型进行传递,然后客户端使用RPC方式 ...
- Netty之二进制文件传输
传输会话简要 客户端发起一个文本请求给服务器端, 服务器端解析里面文本, 返回文件给客户端, 客户端解析文件 服务器端 因为示例文件比较小, 所以没有做分段传输, 而是直接一次性把整个文件byte[] ...
- javascript 利用FileReader和滤镜上传图片预览
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据. 1.FileReader接口的方法 Fi ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- 洗礼灵魂,修炼python(86)--全栈项目实战篇(12)—— 利用socket实现文件传输/并发式聊天
由于本篇博文的项目都很简单,所以本次开个特例,本次解析两个项目,但是都很简单的 项目一:用socket实现文件传输 本项目很简单,作为小项目的预热的,前面刚学完socket,这里马上又利用socket ...
- Linux下利用ssh远程文件传输 传输命令 scp
在linux下一般用scp这个命令来通过ssh传输文件. 一.scp是什么? scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进 ...
- 媒体文件audio 转 base64 编码 (利用 FileReader & Audio 对象)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- python学习之利用socketserver的文件传输
使用socketserver进行多用户的文件传输 服务端 class FtpServer(socketserver.BaseRequestHandler): # 继承socketserver.Base ...
随机推荐
- 如何通过OpenHarmony的音频模块实现录音变速功能?
简介 OpenAtom OpenHarmony(以下简称"OpenHarmony")是由开放原子开源基金会孵化及运营的开源项目,是面向全场景.全连接.全智能时代的智能物联网操作系统 ...
- Matplotlib绘图设置--- 图例设置
plt.legend()和ax.legend()参数设置 自动会将每条线的标签与其风格.颜色进行匹配. plt.legend(*args, **kwargs) Place a legend on th ...
- HDC2021技术分论坛:OpenHarmony驱动框架解读和开发实践
转自:OpenAtom OpenHarmony 作者:yuanbo,华为高级工程师 在IoT时代下,终端设备差异较大.形态各异.尺寸各异.交互方式各异,解决设备适配问题无疑是实现万物互联的一个关 ...
- HDC 2022精彩继续,多重亮点进来看!
原文:https://mp.weixin.qq.com/s/YX5vD4cxM8dA4v2ukFooyA,点击链接查看更多技术内容.
- Prometheus之node_exporter安装
一.简介 node_exporter用来安装到被监控的主机上,暴露被监控主机的指标数据,服务器端基于http协议调用的端口9100(默认)来获取被监控服务器信息. 二.安装部署 下载地址 https: ...
- spring boot properties 编码问题[四]
情景 application.properties 中: server.port=8081 person.last-name=张三 person.age=18 person.birth=2017/12 ...
- native react 代码智能提示
背景 在vscode 中,虽然有插件可以达到代码提示的效果但是不是很嗨. 所以加上这些: 全局安装typings: npm install typings -g 1 安装react和react-nat ...
- Docker compose 部署 nginx+php
Docker compose 部署 nginx+php 拉取Docker镜像 docker pull nginx:1.21.6 docker pull php:7.4.28-fpm 创建docker- ...
- Detectron2环境配置+Ubantu+CUDA10.1+pytorch1.7.0
Detectron2环境配置 1.创建detectron2 conda环境 conda create -n detectron2 python=3.7 2.激活detectron2 conda环境 c ...
- Web前端 -- 利用Babel来将ES6转化为ES5代码
一.简介 Babel用来将ES6代码转为ES5代码. 二.安装 安装命令行转码工具 Babel提供babel-cli工具,用于命令行转码.它的安装命令如下: npm install --global ...