JS의 파일 진보 된 객체의 Blob은을 FileReader는, URI는 Fromdata을 / base64로 문자열을 객체
블롭와 파일
물방울이 파일 부모, 물방울 큰 바이너리 데이터 파일, 물방울은 또한 파일, 물방울보다 광범위한 추상적 포인트가 일부 속성에 해당합니다. 파일은 일반적으로 파일 내의 입력 타입 = '파일'이다.
어떻게 Blob 객체의 이익에 파일로
- 입력 파일로부터의 입력은 내부를받을 객체
- 블롭은 XMLHttpRequest 객체에 의한 기록 요청을 얻을 수있다
- 다른 형태의 바이 획득
데모
<!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 / 파일 객체는 이진 데이터 파일 / bolb을 처리하고, 그 사용이 표시 될 수 있도록하는 것입니다 오브젝트. 그들은 일반적인 방법은 비동기 (완료시, 방법의 차이가 액세스 할 수있는 시간을주기에 이벤트를 완료 아약스 비동기 요청 및 이와 유사한 불확실성이) 참고.
데모
<!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로이 사실은 내가 그들의 2 점 삽입 HTML 또는 그것을 사용에 대한 참조로 사용할 수있는 문자열과 base64로 BLOB 메모리 주소를 참조하고자하는 개체를 호출 할 수 없습니다.
다른 문서에 대한 내용으로 DataURI 포함 된 파일을 base64로 문자열을 사용하는 것 외에도, 당신은 또한 URL 객체를 사용할 수 있습니다. URL 객체는 객체 나 물방울 URL File 객체 포인트를 생성하는 데 사용됩니다
을 FileReader 객체 readAsDataURL "base64로 문자열을주고 (파일 / BLOB)"데이터 : 이미지 / PNG로, Base64로, XXXXXXXXXXXXX "
HTTP : //127.0.0.1 : 8848 / 1557db44-be7e-45c4-86c0-ca00fa106326 URL.createObjectURL (파일 / BLOB)는 기준 메모리 주소 ","BLOB를 얻을 수
URL.createObjectURL (파일 / BLOB)는 기준 메모리 주소를 얻을 수 있습니다
window.URL.revokeObjectURL (된 ObjectURL);
을 FileReader 객체 readAsDataURL (파일 / BLOB) base64로 문자열을주고
参考는 -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 객체
참조 -https : //blog.csdn.net/mr_wuch/article/details/70141674
Fromdata 오히려 중요한 높은 수준의 개체입니다,
참조 기사
지식 공유는 쉽지 않다
다음은 참조의 근원이다
- 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
