역사적으로 JavaScript는 바이너리 데이터를 처리할 수 없습니다. 처리해야 하는 경우 귀하만 charCodeAt() 메서드를 사용하여 텍스트 인코딩을 바이트 단위로 이진 데이터로 변환할 수 있습니다. 또 다른 방법은 이진 데이터를 Base64 인코딩으로 변환한 다음 처리하는 것입니다. 이 두 가지 방법은 속도가 느릴 뿐만 아니라 오류가 발생하기 쉽습니다. 바이너리 데이터를 직접 조작할 수 있는 객체가 도입되었습니다.
Bolb 객체는 이를 기반으로 일련의 관련 API가 파생됩니다. 🎜>, 파일을 조작하는데 사용
객체) 객체는 바이너리 데이터를 나타내며 일련의 작업 인터페이스를 제공합니다. 바이너리 데이터(예: File 객체)를 작동하기 위한 다른 API는 Blob 객체를 기반으로 하며 는 해당 속성을 상속합니다. Blob 객체를 생성하는 방법에는 두 가지가 있습니다. 하나는 Blob 생성자를 사용하는 것이고, 다른 하나는 기존 Blob 객체
(1) Blob 생성자는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 실제 데이터를 포함하는
var htmlParts = ['<a id="a"><b id="b">hey!<\/b><\/a>'];
var myBlob = new Blob(htmlParts, {'type': 'text\/xml'});다음은 Blob 개체를 사용하여 다운로드 가능한 파일을 생성하는 예입니다.
var blob = new Blob(['Hello World']);var a = document.createElement('a'); a.href = window.URL.createObjectURL(blob); a.donwload = 'hello-world.txt'; a.textContent = 'Download Hello World'; body.appendChild(a);
하고 업로드하는 예입니다
var newBlob = oldBlob.slice(startingByte, endindByte);
문자열
.function upload(blobOrFile) { var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
var BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
var SIZE = blob.size; var start = 0;
var end = BYTES_PER_CHUNK; while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);사용자가 파일을 선택하면 파일을 읽을 수 있습니다.
<input type="file" id="input" onchange="console.log(this.files.length)" multiple />
FileList 객체는 드래그 앤 드롭으로도 얻을 수 있습니다.
var selected_file = document.getElementById('input').files[0];
위 코드의 handlerFileSelect는 드래그 앤 드롭 이벤트의
콜백 함수입니다. 해당 매개변수 evt는 이벤트입니다. 객체 및 매개변수의 dataTransfer .files 속성은 드래그 앤 드롭된 파일을 포함하는 FileList 객체입니다.
3. File 객체File 객체는 FileList 객체의 구성원이며 파일 이름, 마지막 수정 시간, 파일 크기 등 파일에 대한 일부 메타 정보를 포함합니다. 그리고 파일 유형. 해당 속성 값은 다음과 같습니다. name: 파일 이름, 이 속성은 읽기 전용입니다.
size: 파일 크기, in bytes, 속성 읽기 전용var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('drop', handleFileSelect, false);
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// ...}FileReader.readAsBinaryString(Blob|File) ：读取结果为二进制字符串，每个字节包含一个0到255之间的整数。
FileReader.readAsText(Blob|File, opt_encoding) ：读取结果是一个文本字符串。默认情况下，文本编码格式是'UTF-8'，可以通过可选的格式参数，指定其他编码格式的文本。
FileReader.readAsDataURL(Blob|File) ： 读取结果是一个基于Base64编码的 data-uri 对象。
FileReader.readAsArrayBuffer(Blob|File) ：读取结果是一个 ArrayBuffer 对象。
FileReader采用异步方式读取文件，可以为一系列事件指定回调函数。
onabort：读取中断或调用reader.abort()方法时触发。
onerror：读取出错时触发。
onload：读取成功后触发。
onloadend：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart：读取将要开始时触发。
onprogress：读取过程中周期性触发。
下面的代码是如何展示文本文件的内容。
var reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result);
}
reader.readAsText(blob);onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容。
下面是一个使用readAsDataURL方法，为img元素添加src属性的例子。
var reader = new FileReader();
reader.onload = function(e) {
document.createElement('img').src = e.target.result;
};
reader.readAsDataURL(f);下面是一个onerror事件回调函数的例子。
var reader = new FileReader();
reader.onerror = errorHandler;
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break;
default:
alert('An error occurred reading this file.');
};
}下面是一个onprogress事件回调函数的例子，主要用来显示读取进度。
var reader = new FileReader();
reader.onprogress = updateProgress;function updateProgress(evt) {
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.totalEric Bidelman) * 100);
var progress = document.querySelector('.percent');
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}读取大文件的时候，可以利用Blob对象的slice方法，将大文件分成小段，逐一读取，这样可以加快处理速度。
URL对象用于生成指向File对象或Blob对象的URL。
var objecturl = window.URL.createObjectURL(blob);
上面的代码会对二进制数据生成一个URL，类似于“blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191”。这个URL可以放置于任何通常可以放置URL的地方，比如img标签的src属性。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL方法，就会得到一个不一样的URL。
这个URL的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个URL就失效。除此之外，也可以手动调用URL.revokeObjectURL方法，使URL失效。
window.URL.revokeObjectURL(objectURL);
下面是一个利用URL对象，在网页插入图片的例子。
var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[0]);
img.height = 60;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
body.appendChild(img);var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
body.appendChild(info);还有一个本机视频预览的例子。
var video = document.getElementById('video');var obj_url = window.URL.createObjectURL(blob); video.src = obj_url; video.play() window.URL.revokeObjectURL(obj_url);
위 내용은 HTML5의 새로운 기능: 파일 및 이진 데이터 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
