File advanced object of js, Blob, FileReader, URI objects / base64 string, Fromdata
File with the Blob
Blob is equivalent to File parent, Blob large binary data file, some properties Blob also has a File, Blob more extensive abstract point. file is generally input type = 'file' inside the file.
How to File with the Blob object gains
- input from the input file objects get inside
- the blob can be obtain write request obtained from XMLHttpRequest
- Other forms obtained Baidu
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<h2>这里演示File对象</h2>
<form id="formId">
<input type="file" id="fileInput" multiple="" />
</form>
</body>
<script>
var fileInput = document.querySelector("#fileInput");
fileInput.addEventListener("change", function(event) {
var file = fileInput.files[0]; //获取单个文件
console.log("单个文件\r", file);
console.log("多个文件\r", fileInput.files) //获取多个文件
}, false)
/* blob可以直接写入
通过XMLHttpRequest请求返回得到
*/
let xhr = new XMLHttpRequest();
xhr.open('get', "https://cdn.bootcss.com/jquery/3.4.1/jquery.js", true);
xhr.responseType = 'blob';
xhr.onload = function() {
let thisFileStatus = this.status;
if (thisFileStatus == 200) {
var blob = this.response;
console.log("通过XMLHttpRequest请求得到了一个blob对象\r\n",blob);
var reader = new FileReader();
reader.readAsDataURL(blob); // 把blob转换为base64，可以直接放入a标签href
reader.onload = function(e) {//处理完成后的事件
//console.log(e.target.result);//显示base64码
}
} else {
console.log("请求失败");
}
};
xhr.send();
/* blob可以直接写入
通过XMLHttpRequest请求返回得到
*/
var data1 = "a";
var data2 = "b";
var data3 = "<div style='color:red;'>This is a blob</div>";
var data4 = {
"name": "abc"
};
var blob1 = new Blob([data1]);
var blob2 = new Blob([data1, data2]);
var blob3 = new Blob([data3]);
var blob4 = new Blob([JSON.stringify(data4)]);
var blob5 = new Blob([data4]);
var blob6 = new Blob([data3, data4]);
//console.log(blob1); //输出：Blob {size: 1, type: ""}
//console.log(blob2); //输出：Blob {size: 2, type: ""}
console.log("直接写入得到blob\r\n",blob3); //输出：Blob {size: 44, type: ""}
//console.log(blob4); //输出：Blob {size: 14, type: ""}
//console.log(blob5); //输出：Blob {size: 15, type: ""}
//console.log(blob6); //输出：Blob {size: 59, type: ""}
</script>
</html>
FileReader objects
FileReader objects main role is asynchronous read blob / file objects to handle binary data file / bolb, and to make use of them can be displayed. They note that general methods are asynchronous (ajax asynchronous requests and similar uncertainty when completed, the difference between the way completed the event with a time cycle can be accessed).
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file"/><br/>
<input type="button" value="读取图像" onclick="readAsDataURL()"/><br/>
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/><br/>
<input type="button" value="读取文本文件" onclick="readAsText()"/><br/>
</p>
<div id="result" name="result"></div>
</body>
<script type="text/javascript">
var result = document.getElementById("result");
var file = document.getElementById("file");
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";
//使选择控件不可操作
file.setAttribute("disabled", "disabled");
}
function readAsDataURL() {
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if (!/image\/\w+/.test(file.type)) {
alert("看清楚，这个需要图片！");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
}
function readAsBinaryString() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以二进制形式读入页面
reader.readAsBinaryString(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
function readAsText() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);
reader.onload = function (f) {
var result = document.getElementById("result");
//显示文件
result.innerHTML = this.result;
}
}
</script>
</html>
URI object / base64 string
DataURI / base64 this fact should not be called an object, I would like to refer to the string and base64 blob memory address that points to the two of them can be used as a reference to embed html or using it.
In addition to using base64 string as a content DataURI embedded files to another document, you can also use a URL object. URL object is used to generate a File object points to an object or Blob URL
FileReader object readAsDataURL (file / blob) to give base64 string "" data: image / png; base64, xxxxxxxxxxxxx "
URL.createObjectURL (file / blob) to get a reference memory address "" blob: http: //127.0.0.1: 8848 / 1557db44-be7e-45c4-86c0-ca00fa106326
URL.createObjectURL (file / blob) to get a reference memory address
window.URL.revokeObjectURL(objectURL);
FileReader object readAsDataURL (file / blob) to give base64 string
参考-https://blog.csdn.net/qq_39258552/article/details/84133770
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
URL.createObjectURL(blob/file)和FileReader.readAsDataURL(blob/file)很相似：
区别
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
执行时机
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
内存使用
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
兼容性方面两个属性都兼容ie10以上的浏览器。
优劣对比：
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL
Fromdata objects
Reference -https: //blog.csdn.net/mr_wuch/article/details/70141674
Fromdata is a rather important high-level object,
Reference article
Knowledge sharing is not easy
following is a source of reference
- https://www.cnblogs.com/dongxixi/p/11005607.html
- https://blog.csdn.net/mr_wuch/article/details/70141674
- https://blog.csdn.net/qq_39258552/article/details/84133770
