HTML5의 새로운 기능: 파일 및 이진 데이터 작업
- 黄舟원래의
- 2017-03-30 13:02:352874검색
역사적으로 JavaScript는 바이너리 데이터를 처리할 수 없습니다. 처리해야 하는 경우 귀하만 charCodeAt() 메서드를 사용하여 텍스트 인코딩을 바이트 단위로 이진 데이터로 변환할 수 있습니다. 또 다른 방법은 이진 데이터를 Base64 인코딩으로 변환한 다음 처리하는 것입니다. 이 두 가지 방법은 속도가 느릴 뿐만 아니라 오류가 발생하기 쉽습니다. 바이너리 데이터를 직접 조작할 수 있는 객체가 도입되었습니다.
Bolb 객체는 이를 기반으로 일련의 관련 API가 파생됩니다. 🎜>, 파일을 조작하는데 사용
- FileList 객체: File 객체의 웹 형식
- FileReader 객체: 바이너리 데이터를 메모리로 읽어오는 역할
- URL 객체: 바이너리 데이터에 대한 URL을 생성하는 데 사용됩니다
객체) 객체는 바이너리 데이터를 나타내며 일련의 작업 인터페이스를 제공합니다. 바이너리 데이터(예: 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);위 코드를 클릭하면 하이퍼링크가 생성됩니다. hello-world.txt 텍스트 파일을 다운로드합니다. 파일 내용은 "Hello World"입니다. (2) Blob 개체의 슬라이스 메서드는 바이너리 데이터를 바이트로 나누고 새로운 Blob 개체를 반환합니다. >다음은 XMLHttpRequest 객체를 사용하여 대용량 파일을 분할
하고 업로드하는 예입니다
var newBlob = oldBlob.slice(startingByte, endindByte);(3) Blob 객체에는 두 가지 읽기 전용 속성이 있습니다. size: 바이너리 데이터의 크기(바이트)입니다. 유형: 바이너리 데이터의 MIME 유형, 모두 소문자, 유형을 알 수 없는 경우 값은 비어 있습니다
문자열
.- Ajax 작업에서는 xhr.responseType을 blob으로 설정하면 바이너리 데이터를 받습니다.
- 2. FileList 개체 용입니다. 사용자가 파일 컨트롤을 통해 파일을 선택하면 이 컨트롤의 파일 속성 값은 FileList 개체입니다. 이는 배열과 구조가 유사하며 사용자가 선택한 여러 파일을 포함합니다.
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, 속성 읽기 전용- type: 파일의 MIME 유형입니다. 유형을 구별할 수 없는 경우 이 속성은 읽기 전용입니다.
- lastModifiedDate: 파일의 마지막 수정 시간입니다. 이 속성은 읽기 전용입니다.
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方法，将大文件分成小段，逐一读取，这样可以加快处理速度。
5、URL对象
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!