Введение в объекты ArrayBuffer и объекты Blob

внешний интерфейс JavaScript

Это 3-й день моего участия в августовском испытании обновлений, узнайте подробности события:Испытание августовского обновления

Объект ArrayBuffer, объект Blob

Объект ArrayBuffer

Объект ArrayBuffer представляет часть двоичных данных, которая используется для имитации данных в памяти. Через этот объект JavaScript может читать и записывать двоичные данные. Этот объект можно рассматривать как представление данных в памяти.

Браузер изначально предоставляетArrayBuffer()Конструктор, используемый для создания экземпляра. Он принимает целое число в качестве параметра, указывающего, сколько байтов занимают эти двоичные данные.

var buffer = new ArrayBuffer(8);

В приведенном выше коде экземпляр объектаbufferЗанимает 8 байт.

Объекты ArrayBuffer имеют свойства экземпляраbyteLength, указывающий размер памяти (в байтах), занимаемый текущим экземпляром.

var buffer = new ArrayBuffer(8);
buffer.byteLength // 8

Объекты ArrayBuffer имеют методы экземпляраslice(), используемый для копирования части памяти. Он принимает два целочисленных параметра, которые представляют начальную позицию копии (начиная с 0) и конечную позицию (конечная позиция не учитывается при копировании), если второй параметр опущен, это означает, что копирование было сделано до тех пор, пока конец.

var buf1 = new ArrayBuffer(8);
var buf2 = buf1.slice(0);

Приведенный выше код означает копирование исходного экземпляра.

Объект большого двоичного объекта

Введение

Объект Blob представляет содержимое данных двоичного файла, например содержимое файла изображения, которое можно читать и записывать с помощью объекта Blob. Обычно он используется для чтения и записи файлов, а его имя является сокращением от Binary Large Object. Он отличается от ArrayBuffer тем, что используется для управления двоичными файлами, а ArrayBuffer — для управления памятью.

Браузер изначально предоставляетBlob()Конструктор, используемый для создания объектов экземпляра.

new Blob(array [, options])

BlobКонструктор принимает два параметра. Первый параметр — это массив, членами которого являются строки или двоичные объекты, представляющие вновь сгенерированныеBlobСодержимое экземпляра объекта; второй параметр является необязательным и представляет собой объект конфигурации, который в настоящее время имеет только одно свойство.type, значением которого является строка, представляющая MIME-тип данных, по умолчанию используется пустая строка.

var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});

В приведенном выше коде экземпляр объектаmyBlobСодержит строки. При создании экземпляра тип данных указывается какtext/html.

Вот еще один пример: Blob содержит данные JSON.

var obj = { hello: 'world' };
var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});

Свойства экземпляра и методы экземпляра

BlobИмеет два свойства экземпляраsizeа такжеtype, которые возвращают размер и тип данных соответственно.

var htmlFragment = ['<a id="a"><b id="b">hey!</b></a>'];
var myBlob = new Blob(htmlFragment, {type : 'text/html'});

myBlob.size // 32
myBlob.type // "text/html"

Blobимеет метод экземпляраslice, который используется для копирования исходных данных и возвращаетBlobпример.

myBlob.slice(start, end, contentType)

sliceМетод имеет три параметра, все из которых являются необязательными. Это по порядку: начальная позиция байта (по умолчанию 0), конечная позиция байта (по умолчанию 0).sizeЗначение свойства, само местоположение не будет включено в скопированные данные), тип данных нового экземпляра (по умолчанию пустая строка).

Получить информацию о файле

средство выбора файлов<input type="file">Используется, чтобы позволить пользователю выбрать файл. Из соображений безопасности браузеры не позволяют сценариям устанавливатьvalueАтрибуты, то есть файл должен быть выбран пользователем вручную и не может быть указан скриптом. Как только пользователь выбирает файл, сценарий может прочитать файл.

Селектор файлов возвращает объект FileList, который является членом, подобным массиву, каждый из которых является объектом экземпляра File. Объект экземпляра файла — это специальный экземпляр BLOB-объекта, который добавляетnameа такжеlastModifiedDateАтрибуты.

// HTML 代码如下
// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>

function fileinfo(files) {
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    console.log(
      f.name, // 文件名，不含路径
      f.size, // 文件大小，Blob 实例属性
      f.type, // 文件类型，Blob 实例属性
      f.lastModifiedDate // 文件的最后修改时间
    );
  }
}

Помимо средства выбора файлов, API перетаскиванияdataTransfer.filesТо, что возвращается, также является объектом FileList, и поэтому его члены также являются объектами экземпляра File.

загрузить файл

При запросе AJAX, если указаноresponseTypeсобственностьblob, загрузка является объектом Blob.

function getBlob(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    callback(xhr.response);
  }
  xhr.send(null);
}

В приведенном выше кодеxhr.responseВы получаете объект Blob.

Создать URL

Браузер позволяет использоватьURL.createObjectURL()метод для создания временного URL-адреса для объекта Blob для использования определенными API. Этот URL-адрес начинается сblob://В начале указывается, что он соответствует объекту Blob, а за заголовком протокола следует идентификатор, который используется для уникального соответствия объекту Blob в памяти. Это сdata://URL(URL-адрес содержит фактические данные) иfile://URL(файлы в локальной файловой системе) отличаются.

var droptarget = document.getElementById('droptarget');

droptarget.ondrop = function (e) {
  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    var type = files[i].type;
    if (type.substring(0,6) !== 'image/')
      continue;
    var img = document.createElement('img');
    img.src = URL.createObjectURL(files[i]);
    img.onload = function () {
      this.width = 100;
      document.body.appendChild(this);
      URL.revokeObjectURL(this.src);
    }
  }
}

Приведенный выше код позволяет пользователю предварительно просмотреть выбранный файл, генерируя URL-адрес для перетаскиваемых файлов изображений и создавая их эскизы.

Браузер обрабатывает URL-адреса BLOB-объектов так же, как и обычные URL-адреса. Если объект Blob не существует, он возвращает код состояния 404; если это междоменный запрос, он возвращает код состояния 403. URL-адреса больших двоичных объектов допустимы только для запросов GET. Если запрос выполнен успешно, возвращается код состояния 200. Поскольку URL-адрес BLOB-объекта является обычным URL-адресом, его можно загрузить.

прочитать файл

После получения объекта Blob вы можетеFileReaderобъект, прочитать содержимое объекта Blob, то есть содержимое файла.

Объект FileReader предоставляет четыре метода для работы с объектами Blob. Объекты BLOB-объектов передаются в качестве параметров этим методам и возвращаются в указанном формате.

  • FileReader.readAsText(): Возвращает текст, нужно указать кодировку текста, по умолчанию UTF-8.
  • FileReader.readAsArrayBuffer(): возвращает объект ArrayBuffer.
  • FileReader.readAsDataURL(): возвращает URL-адрес данных.
  • FileReader.readAsBinaryString(): возвращает исходную двоичную строку.

НижеFileReader.readAsText()Пример метода чтения текстового файла.

// HTML 代码如下
// <input type="file" onchange="readfile(this.files[0])"></input>
// <pre id="output"></pre>
function readfile(f) {
  var reader = new FileReader();
  reader.readAsText(f);
  reader.onload = function () {
    var text = reader.result;
    var out = document.getElementById('output');
    out.innerHTML = '';
    out.appendChild(document.createTextNode(text));
  }
  reader.onerror = function(e) {
    console.log('Error', e);
  };
}

В приведенном выше коде, указав объект экземпляра FileReaderonloadфункция слушателя в экземпляреresultАтрибут для получения содержимого файла.

НижеFileReader.readAsArrayBuffer()Примеры методов чтения бинарных файлов.

// HTML 代码如下
// <input type="file" onchange="typefile(this.files[0])"></input>
function typefile(file) {
  // 文件开头的四个字节，生成一个 Blob 对象
  var slice = file.slice(0, 4);
  var reader = new FileReader();
  // 读取这四个字节
  reader.readAsArrayBuffer(slice);
  reader.onload = function (e) {
    var buffer = reader.result;
    // 将这四个字节的内容，视作一个32位整数
    var view = new DataView(buffer);
    var magic = view.getUint32(0, false);
    // 根据文件的前四个字节，判断它的类型
    switch(magic) {
      case 0x89504E47: file.verified_type = 'image/png'; break;
      case 0x47494638: file.verified_type = 'image/gif'; break;
      case 0x25504446: file.verified_type = 'application/pdf'; break;
      case 0x504b0304: file.verified_type = 'application/zip'; break;
    }
    console.log(file.name, file.verified_type);
  };
}
Категории