blob与file
Blob 对象表示一个二进制文件的数据内容,是Binary Large Object (二进制大型对象)的缩写
Blob
实例属性
- size:大小
- type:类型
实例方法
- slice(start?,end?,contenType?):用来拷贝原来的数据,返回的也是一个Blob实例。
Blob 应用场景
下载文件
responseType属性为blob,下载下来的就是一个 Blob 对象。
js
function getBlob(url,callback){
let xhr = new XMLHttpRequest()
xhr.open('GET',url)
xhr.responseType = 'blob'
xhr.onload = function(){
// 这里返回的就是一个blob
callback(xhr.response);
}
xhr.send(null)
}
function getBlob(url,callback){
let xhr = new XMLHttpRequest()
xhr.open('GET',url)
xhr.responseType = 'blob'
xhr.onload = function(){
// 这里返回的就是一个blob
callback(xhr.response);
}
xhr.send(null)
}
生成文件的临时url
比如选择图片文件时生成缩略图
js
function getBlobUrl(blob){
return URL.createObjectURL(blob)
}
function getBlobUrl(blob){
return URL.createObjectURL(blob)
}
FileReader
读取Blob对象的内容
- readAsText:返回文本默认UTF-8
- readAsArrayBuffer:ArrayBuffer对象
- readAsDataURL:返回Data URL
- readAsBinaryString:返回原始二进制字符串
读取文本文件例子
html
<input type="file" id="filePicker">
<input type="file" id="filePicker">
js
let picker = document.querySelector('#filePicker')
let reader = new FileReader();
reader.onload = function () {
var text = reader.result;
let pre = document.createElement('pre')
pre.textContent = text
document.body.append(pre)
}
picker.addEventListener('change', function (e) {
let file = e.currentTarget.files[0]
reader.readAsText(file, "UTF-8")
})
let picker = document.querySelector('#filePicker')
let reader = new FileReader();
reader.onload = function () {
var text = reader.result;
let pre = document.createElement('pre')
pre.textContent = text
document.body.append(pre)
}
picker.addEventListener('change', function (e) {
let file = e.currentTarget.files[0]
reader.readAsText(file, "UTF-8")
})
File
File 实例对象是一个特殊的 Blob 实例,增加了name
(文件名称)和lastModifiedDate
(最后修改时间)属性。它继承了 Blob 对象,所有可以使用 Blob 对象的场合都可以使用它
最常见的获取方式就是<input type="file">
,用户选中文件以后,浏览器就会生成一个数组,里面的内容就是选择的文件,它们都是 File 实例对象。