JS前端使用Blob和File读取文件的操作代码

王子 · 2022-11-8 08:33:55

历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象，允许直接操作二进制数据。

Blob

对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关API，用来操作文件。

Blob (Binary Large Object) 对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

创建 Blob 类型的对象

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

1. new Blob()

Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，这个数组中的元素可以为 DOMString ，或者 ArrayBuffer ，第二个参数是数据的类型，这两个参数都不是必需的。

var domstring = '<div>Hello world</div>';
var blob1 = new Blob([domstring], {type: 'text/html'});
var buffer = new ArrayBuffer(8);
var blob2 = new Blob([buffer], {type: 'text/plain'});

复制代码

2. blob.slice()

此方法返回一个新的 Blob 对象，包含了原 Blob 对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)。start：开始索引，默认为0；end：截取结束索引（不包括end）；contentType：新Blob的MIME类型，默认为空字符串

Blob 对象的属性

Blob 应用实例

下面是一个使用XMLHttpRequest对象，将大文件分割上传的例子。

function upload(blobOrFile) {
let xhr = new XMLHttpRequest();
xhr.open('post', '/server', true);
xhr.onload = function(e) {};
xhr.send(blobOrFile);
}
document.querySelctor('input[type="file"]').addEventListener('change', function() {
let blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
const SIZE = blob.size;
let start = 0;
let end = BYTES_PER_CHUNK;
while(start < end) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);

复制代码

File

File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

File 对象可以用来获取某个文件的信息，还可以用来读取这个文件的内容。通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象。
用户在选择一个或者多个文件后，可以通过 File API访问这些File 对象，这些对象被包含在一个 FileList 对象中。所有 type 为 file 的 input 都有一个 files 属性，通过 Element.files 可以返回 FileList 对象。

<body>
<input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
<script>
var fileInput = document.querySelector("#fileInput");
fileInput.addEventListener("change", function (event) {
// 文件列表对象
var fileList = this.files;
// 获取第一个文件
var file = fileInput.files[0];
// 文件名
var filename = file.name;
// 文件大小
var filesize = file.size;
//文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
var type = file.type;
// 文件的上次修改时间，格式为时间戳
var lastModified = file.lastModified;
// 文件的上次修改时间，格式为 Date 对象实例
var lastModifiedDate = file.lastModifiedDate;
}, false);
console.log(fileList);
// 上传了两个文件，FileList {0: File, 1: File, length: 2}
</script>
</body>

复制代码

File 对象的属性:

File 对象的方法：
File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。

FileReader

我们知道 Blob 对象只是二进制数据的容器，本身并不能操作二进制，FileReader 对象就是专门操作二进制数据的，FileReader 主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

构造函数

var reader = new FileReader();

复制代码

属性

事件

方法

实际应用

上传图片后直接进行预览，而不用先经过后台。

var input = document.getElementById("file"); //input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
// 将图片转成DataURL格式
reader.readAsDataURL(file);
reader.onload = function(){
//读取完毕后输出结果
document.getElementById("file_img").src = reader.result //显示上传的图片
console.log(reader.result);
}
}
}

复制代码

URL

URL.createObjectURL(blob)

//blob参数是一个File对象或者Blob对象.
var objecturl = window.URL.createObjectURL(blob);

复制代码

上面的代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。
这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

URL.revokeObjectURL(objectURL);

当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
实际应用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="./lib/jquery.js"></script>
<style type="text/css">
#file{
display: block;
width: 400px;
height: 300px;
opacity:0;
margin: -300px 0 0 0;
}
#preview{
display: block;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<img id="preview" src="" alt="点击上传图片"/>
<input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
$('#file').on('change', function(){
//获取文件列表对象
var fileList = $('#file')[0].files;
//创建文件流获取文件地址
var src = window.URL.createObjectURL(fileList[0]); 　　　　
//设置图片路径
$("#preview").attr("src", src);
$("#preview").load(function() {
window.URL.revokeObjectURL(src);
});
　});
</script>

复制代码

参考资料

Blob - Web API 接口参考 | MDN
Blob,FileReader全面解析
到此这篇关于JS前端使用Blob和File读取文件的文章就介绍到这了,更多相关js使用Blob和File读取文件内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！

[前端] JS前端使用Blob和File读取文件的操作代码

新人须知

常见问题

关于我们