js-Blob analysis directory
Article Directory
Preface
Blob：
- Can be stored in the database
postMessageSend to other windows andworkerXMLHttpRequestThesendmethodcreateObjectURL()Get specialblob://URL
Recommended reading
- "JS Definitive Guide"
File asBlob
- If it is an
dropevent, you can usedataTransfer.files
index.html- inputupload files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="file" accept="image/*" multiple οnchange="fileInfo(this.files)"/> -->
<input type="file" accept="image/*" multiple/>
<script src="fileBlob.js"></script>
</body>
</html>
js
let input = document.getElementsByTagName('input')[0];
input.addEventListener('change', event => {
// console.log('a');
// console.log(files);
let filesList =input.files;
console.log(filesList);
for(let a = 0; a < filesList.length; a++){
let i = filesList[a];
console.log(i.name,
i.size,
i.type,
i.lastModifiedDate);
}
});
// function fileInfo(files) {
// console.log(files);
// for(let i = 0; i < files.length; i++){
// let f = files[i];
// console.log(f.name);
// }
// }
downloadBlob
XHR2: Download theURLspecified content in theBlobform
// 以Blob形式获取URL指定的内容，并将其传递给指定的回调函数
function getBlob(url, callback) {
let xhr = new XMLHttpRequest();
xhr.open("GET", url);
// 以blob的形式获取内容
xhr.responseType = "blob";
xhr.onload = () => {
callback(xhr.response);
};
xhr.send(null);
}
structureBlob
BlobCommonly used to mean: local filesURLand big data of external resources in the database are fastwebMade with own dataBlob
let blob = new BlobBuilder();
// add one word in Blob, use null as end of the string
blob.append("This blob contains this text and 10 big-endian 32-bit signed ints.");
blob.append("\0"); // NULL
// data store in ArrayBuffer
let ab = new ArrayBuffer(4*10),
dv = new DataView(ab);
for(let i = 0; i < 10; i++){
dv.setInt32(i*4, i);
}
// add ArrayBuffer in Blob
blob.append(ab);
// get blob from builder, assign MIME Type
let result = blob.getBlob("x-optional/mime-type-here");
console.log(result);
- But it
BlobBuilderis obsolete
Blob URL
- Create a
URLlink to thatBlob createObjectURL()- The
URLtoblob://begin withdata://URLdifferent:blob://:BlobA simple reference to the browser stored in memory or on disk- The latter will encode the content
Blob URLIt is not permanent. Once you close or leave theblobdocument containing the creation script, the link will be invalid
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#droptarget {
border: solid black 2px;
width: 200px;
height: 200px;
}
#droptarget.active {
border: solid red 4px;
}
</style>
</head>
<body>
<div id="droptarget">Drop files here</div>
<script src="blobFiles.js"></script>
</body>
</html>
blobFiles.js
const getBlobURL = (window.URL && URL.createObjectURL.bind(URL)) ||
(window.webkitURL && webkitURL.createObjectURL.bind(webkitURL)) ||
window.createObjectURL;
const revokeBlobURL = (window.URL && URL.revokeObjectURL.bind(URL)) ||
(window.webkitURL && webkitURL.revokeObjectURL.bind(webkitURL)) ||
window.revokeObjectURL;
let droptarget = document.getElementById('droptarget');
droptarget.ondragenter = event => {
let types = event.dataTransfer.types;
if(!types ||
(types.contains && types.contains("Files")) ||
(types.indexOf && types.indexOf("Files") != -1)){
// 文件拖入高亮
droptarget.classList.add("active");
return false;
}
};
droptarget.ondragover = event => false;
droptarget.ondrop = event => {
let files = event.dataTransfer.files;
for(let i = 0; i < files.length; i++) {
let type = files[i].type;
if(type.substring(0,6) !== "image/"){
continue;
}
let img = document.createElement('img');
img.src = getBlobURL(files[i]);
// ES6中，箭头函数是没有argumens的
img.onload = function() {
console.log(arguments);
this.width = 100;
document.body.appendChild(img);
// 避免内存泄露
revokeBlobURL(this.src);
};
}
droptarget.classList.remove('active');
return false;
};
Read Blob-FileReader
BlobIt is an opaque large data block that is only allowed to beBlob URLaccessed through
Use to FileReaderread text files
// 读取文本文件
function readFile(f) {
let reader = new FileReader();
reader.readAsText(f);
reader.onload = function(event) {
let text = reader.result;
console.log(text);
let out = document.getElementsByTagName('input')[0];
out.appendChild(document.createTextNode(text));
}
reader.onerror = function(e) {
console.log(`ERR: ${
e}`);
}
}
// 读取文件的前4个字节
function typefile(file) {
let slice = file.slice(0,4);
let reader = new FileReader();
reader.readAsArrayBuffer(slice);
reader.onload = function(e) {
let buffer = reader.result;
let view = new DataView(buffer);
// 以高位优先字节顺序
let magic = view.getUint32(0, false);
switch(magic) {
case 0x89504E47: file.verified_type = "image/png"; break;
case 0x47494638: file.verified_type = "image/gif"; break;
case 0x25504446: file.verified_type = "application/pdf"; break;
case 0x504b0304: file.verified_type = "application/zip"; break;
}
console.log(file.name, file.verified_type);
}
}