Historisch gesehen kann JavaScript keine Binärdaten verarbeiten. Wenn sie verarbeitet werden müssen, nur Sie Sie können die charCodeAt()-Methode verwenden, um die Textkodierung byteweise in Binärdaten umzuwandeln und sie dann zu verarbeiten. Diese beiden Methoden sind nicht nur langsam, sondern auch fehleranfällig Das -Objekt ermöglicht die direkte Manipulation von Binärdaten. Das
Bolb-Objekt ist ein Basisobjekt, das Binärdaten darstellt. Darauf basierend wird eine Reihe verwandter APIs abgeleitet 🎜>, wird zum Betreiben von Dateien verwendet
Blob (Binary Large
Objekt
) Das Objekt stellt ein Stück Binärdaten dar und stellt eine Reihe von Betriebsschnittstellen für den Betrieb von Binärdaten (z. B. Dateiobjekte) bereit, die auf dem Blob-Objekt basieren und dessen Eigenschaften erben und Methoden. Es gibt zwei Möglichkeiten, ein Blob-Objekt zu generieren: Eine besteht darin, den Blob-Konstruktor zu verwenden, und die andere darin, die Slice-Methode für ein vorhandenes Blob-Objekt zu verwenden > (1) Blob-Konstruktor, akzeptiert zwei Parameter. Der erste Parameter ist ein Array
, das die tatsächlichen Daten enthält, und der zweite Parameter ist der Typ der Daten 🎜>
Das Folgende ist ein Beispiel für die Verwendung eines Blob-Objekts zum Generieren einer herunterladbaren Datei
Der obige Code fordert Sie zum Herunterladen auf die Textdatei hello-world.txt, wenn darauf geklickt wird. Der Dateiinhalt ist „Hello World“ (2). Die Slice-Methode des Blob-Objekts unterteilt die Binärdaten in Bytes und gibt ein neues Blob-Objekt zurück >Das Folgende ist ein Beispiel für die Verwendung des XMLHttpRequest-Objekts zum
Hochladen
var htmlParts = ['<a id="a"><b id="b">hey!<\/b><\/a>'];
var myBlob = new Blob(htmlParts, {'type': 'text\/xml'});Nach dem Login kopieren
(3) Das Blob-Objekt verfügt über zwei schreibgeschützte Attribute:
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);
Nach dem Login kopieren
Größe: Größe der Binärdaten in Bytes.
var newBlob = oldBlob.slice(startingByte, endindByte);
Nach dem Login kopieren
Typ: MIME-Typ der Binärdaten, alles in Kleinbuchstaben, wenn der Typ unbekannt ist, ist der Wert leer
String.
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);Nach dem Login kopieren
Wenn im Ajax-Betrieb xhr.responseType auf Blob gesetzt ist, werden Binärdaten empfangen.
2. FileList-Objekt FileList-Objekt ist für die Datei
-Steuerung Wenn der Benutzer die Datei auswählt, kann die Datei gelesen werden.
FileList-Objekte können auch per Drag & Drop abgerufen werden.
Das handleFileSelect im obigen Code ist die
Rückruffunktion
<input type="file" id="input" onchange="console.log(this.files.length)" multiple />
Nach dem Login kopieren
des Drag-and-Drop-Ereignisses
. Sein Parameter evt ist ein Ereignis Objekt. Die dataTransfer.files-Eigenschaft ist ein FileList-Objekt, das die per Drag & Drop gezogenen Dateien enthält.
3. File-Objekt
var selected_file = document.getElementById('input').files[0];
Nach dem Login kopieren
Das File-Objekt ist ein Mitglied des FileList-Objekts und enthält einige Metainformationen über die Datei, wie z. B. Dateiname, letzte Änderungszeit, Dateigröße und Dateityp. Seine Attributwerte lauten wie folgt:
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.
// ...}Nach dem Login kopieren
Name: Dateiname, dieses Attribut ist schreibgeschützt
Größe: Dateigröße, in Bytes, das Attribut schreibgeschützt
Typ: MIME-Typ der Datei. Wenn der Typ nicht unterschieden werden kann, handelt es sich um eine leere Zeichenfolge.
lastModifiedDate: Der letzte Änderungszeitpunkt der Datei. Dieses Attribut ist schreibgeschützt.
Das FileReader-Objekt empfängt das File-Objekt oder Blob-Objekt als Parameter, der zum
Lesen des tatsächlichen Inhalts der Datei < verwendet wird 🎜>, das heißt, den Inhalt der Datei in den Speicher einlesen. Für verschiedene Dateitypen verwendet FileReader unterschiedliche Methoden zum Lesen. 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采用异步方式读取文件，可以为一系列事件指定回调函数。
下面的代码是如何展示文本文件的内容。
var reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result);
}
reader.readAsText(blob);Nach dem Login kopieren
onload事件的回调函数接受一个事件对象，该对象的target.result就是文件的内容。
下面是一个使用readAsDataURL方法，为img元素添加src属性的例子。
var reader = new FileReader();
reader.onload = function(e) {
document.createElement('img').src = e.target.result;
};
reader.readAsDataURL(f);Nach dem Login kopieren
下面是一个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.');
};
}Nach dem Login kopieren
下面是一个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 + '%';
}
}
}Nach dem Login kopieren
读取大文件的时候，可以利用Blob对象的slice方法，将大文件分成小段，逐一读取，这样可以加快处理速度。
5、URL对象
URL对象用于生成指向File对象或Blob对象的URL。
var objecturl = window.URL.createObjectURL(blob);
Nach dem Login kopieren
上面的代码会对二进制数据生成一个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);
Nach dem Login kopieren
下面是一个利用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);Nach dem Login kopieren
还有一个本机视频预览的例子。
var video = document.getElementById('video');var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonNeue HTML5-Funktionen: Datei- und Binärdatenoperationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
