Neue HTML5-Funktionen: Datei- und Binärdatenoperationen

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

• Datei

  Objekt: Verantwortlich für die Verarbeitung von Binärdaten, die in Form von Dateien vorliegen, d. h. für den Betrieb lokaler Dateien

FileList-Objekt: Webform des Dateiobjekts
• Schnittstelle

FileReader-Objekt: Verantwortlich für das Lesen von Binärdaten in den Speicher
URL-Objekt: Wird zum Generieren einer URL für Binärdaten verwendet
1. Blob-Objekt

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 = [&#39;<a id="a"><b id="b">hey!<\/b><\/a>&#39;];
var myBlob = new Blob(htmlParts, {&#39;type&#39;: &#39;text\/xml&#39;});

(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);

Größe: Größe der Binärdaten in Bytes.

var newBlob = oldBlob.slice(startingByte, endindByte);

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);

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
des Formulars. Wenn der Benutzer eine Datei über das Dateisteuerelement auswählt, ist der Wert des Dateiattributs dieses Steuerelements das FileList-Objekt. Die Struktur ähnelt einem Array und enthält mehrere vom Benutzer ausgewählte Dateien.

• 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 />

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];

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.

    // ...}

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.

4. FileReader-Objekt

• Das FileReader-Objekt empfängt das File-Objekt oder Blob-Objekt als Parameter, der zum

  Lesen des tatsächlichen Inhalts der Datei , 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采用异步方式读取文件，可以为一系列事件指定回调函数。

• 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 + &#39;%&#39;;
        progress.textContent = percentLoaded + &#39;%&#39;;
      }
    }
}

读取大文件的时候，可以利用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);

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!