js高级对象之File、Blob、FileReader、URI对象/base64字符串、Fromdata
- File与Blob
- File与Blob对象如何获得
- FileReader对象
- URI对象/base64字符串
- URL.createObjectURL(file/blob)得到内存引用地址
- FileReader对象中readAsDataURL(file/blob)得到base64字符串
- Fromdata对象
- 参考文章
File与Blob
Blob相当于File的父类，Blob是大文件二进制数据，Blob的一些属性也File都有，Blob更加广泛抽象一点。file一般就是input type=‘file’里面的文件。
File与Blob对象如何获得
- file对象从input输入里面获得
- blob对象可以写入获得也可以从XMLHttpRequest请求获得
- 其他形式获得百度
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对象
FileReader对象主要作用就是异步读取blob/file对象二进制数据来处理file/bolb的，并可以显示出来拿来用。注意他们一般方法都是异步的(和ajax异步请求类似什么时候完成不确定，可以用时间循环访问的方式区别事件的全部完成)。
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对象/base64字符串
DataURI/base64这个其实不应该叫对象，我想指的是base64字符串 和 blob内存指向地址 他们两可以用来作为引用嵌入到html中或者使用它。
除了可以使用base64字符串作为内容的DataURI将一个文件嵌入到另外一个文档里，还可以使用URL对象。URL对象用于生成指向File对象或Blob对象的URLFileReader对象中readAsDataURL(file/blob)得到base64字符串》》data:image/png;base64,xxxxxxxxxxxxx”
URL.createObjectURL(file/blob)得到内存引用地址》》blob:http://127.0.0.1:8848/1557db44-be7e-45c4-86c0-ca00fa106326
URL.createObjectURL(file/blob)得到内存引用地址
window.URL.revokeObjectURL(objectURL);
FileReader对象中readAsDataURL(file/blob)得到base64字符串
参考-
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.readAsDataURLFromdata对象
参考-
Fromdata也是比较重要的高级对象，
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
