Подробное объяснение файловых объектов JavaScript

Для манипулирования файлами в браузере в большинстве случаевFileОбъекты из<input type='file' />Получение элемента, а затем продолжение операции (например, отображение выбранного изображения на странице, загрузка файла на сервер с помощью ajax и т. д.). Вот соответствующие API для управления файлами в браузере.

FileОбъект наследуется отBlobОбъект, сначала посмотриBlobобъект.

1. Объект блоба

BlobObject представляет собой неизменяемый, примитивный объект, похожий на файл данных. Большие двоичные объекты не обязательно представляют данные в собственном формате JavaScript.

Конструктор BLOB-объектов Blob(array[ options])

• array — это массив объектов, таких как ArrayBuffer, ArrayBufferView, Blob, string и т. д., или смесь других подобных объектов, которые будут помещены в Blob. строка будет закодирована как UTF-8.
• options — необязательный объект, который может указывать следующие два свойства:
  • тип, значение по умолчанию — "", которое представляет содержимое массива, которое будет помещено в большой двоичный объект.MIMEТипы.
  • окончания, которые по умолчанию являются «прозрачными», используются для указания того, как записываются строки, содержащие окончания строк \n. Это одно из двух значений: «собственный», что означает, что разделитель строки будет изменен на символ новой строки, подходящий для файловой системы основной операционной системы, или «прозрачный», что означает, что разделитель, хранящийся в большом двоичном объекте, останется неизменным.

Пример:

var content1 = ['This is my firt trip to an island'];
var blob1 = new Blob(content, {type: 'text/plain'});
var content2 = {name: 'Alice', age: 23};
var blob2 = new Blob([JSON.stringify(content2, null, 2)], {type: 'application/json'});

Свойства экземпляра BLOB-объекта

Имя свойства	читай пиши	описывать
size	только чтение	BlobРазмер (в байтах) данных, содержащихся в объекте.
type	только чтение	Строка, указывающая размер данных, содержащихся в этом объекте Blob.MIMEТипы. Если тип неизвестен, значением является пустая строка. Например, "изображение/png".

Пример:

var content = ['<div id="box"><p class="pra">a paragraph</p></div>'];
var blob = new Blob(content, {type: 'text/html'});
console.log(blob.size); // 50
console.log(blob.type); // text/html

Методы экземпляра BLOB-объекта

• slice([start[, end[, contentType]]])

sliceМетод принимает три необязательных параметра,startа такжеendвсе числовые значения, указывающие на дальность перехвата,contentTypeУказывает содержимое для перехватаMIMEТипы. вернуть новыйBlobобъект.

var blob = new Blob(['This is an example of Blob slice method'], {type: 'text/plain'});
console.log(blob.size); // 39
var newBlob = blob.slice(10, 20, 'text/plain');
console.log(newBlob.size); // 10

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

2. Файловый объект

Конструктор файлов

Большинство вещей, о которых мы связывалисьFileВсе операции чтения, а js также предоставляет нам ручное созданиеFileКонструктор объекта:File(bits, name[, options]).

• биты (обязательно) ArrayBuffer, ArrayBufferView, Blob или Array[string] — или любая комбинация этих объектов. Это содержимое файла в кодировке UTF-8. .

• имя [Строка] (обязательно) имя файла или путь к файлу.

• опции [Объект] (необязательно) Объект параметров, содержащий необязательные атрибуты файла. Доступны следующие варианты:

  • type: строка, представляющая содержимое, которое будет помещено в файлMIMEТипы. Значение по умолчанию — ''.
  • lastModified: числовое значение, временная метка Unix (в миллисекундах), указывающая время последнего изменения файла. По умолчанию используется Date.now().

Пример:

var file1 = new File(['text1', 'text2'], 'test.txt', {type: 'text/plain'});

Согласно существующимblobсоздание объектаFileОбъект:

var file2 = new File([blob], 'test.png', {type: 'image/png'});

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

FileСодержимое экземпляра объекта не видно, но доступны следующие свойства:

Имя свойства	читай пиши	описывать
name	только чтение	Возвращает имя файла. Из соображений безопасности возвращаемое значение не содержит пути к файлу.
type	только чтение	вернутьFileТип носителя (MIME) файла, представленного объектом. Например, изображение PNG — это «image/png».
lastModified	только чтение	число, возвращает дату последнего изменения указанного файла в миллисекундах с 1 января 1970 г. 0:00.
lastModifiedDate	только чтение	Дата, возвращает дату последнего изменения текущего файла.Если дату последнего изменения файла невозможно получить, вместо нее используется текущая дата.

Пример:

<input type="file" id='file'>

document.getElementById('file').addEventListener('change', function(event){
  const file = this.files[0];
  if (file) {
    console.log(file.name);
    console.log(file.size);
    console.log(file.lastModified);
    console.log(file.lastModifiedDate);
  }
});

Примечание:Основываясь на текущей реализации, браузер фактически не читает поток байтов файла, чтобы определить его тип мультимедиа. Предполагается, что это зависит от расширения файла; переименуйте расширение файла изображения PNG в.txt, затем прочитайте файлtypeЗначением свойства является "text/plain", а не "image/png" . а также,file.typeНадежен только для распространенных типов файлов. Например, изображения, документы, аудио и видео. Необычные расширения файлов возвращают пустую строку. Разработчикам лучше не полагаться на это свойство как на единственную схему проверки.

Методы экземпляра файла

• slice([start[, end[, contentType]]])

FileОбъект не определяет дополнительные методы из-за наследованияBlobобъект, который наследуетsliceспособ тот же, что и вышеBlobизsliceметод.

FileReader, URL.createObjectURL(), createImageBitmap() и XMLHttpRequest.send() могут обрабатывать большие двоичные объекты и файлы.

3. Объект Filereader

FileReaderОбъект веб-приложения позволяет асинхронно читать файлы, хранящиеся на компьютере пользователя (или в буферах необработанных данных), с использованиемFileилиBlobОбъект указывает файл или данные для чтения.

вFileОбъекты могут быть от пользователя в<input>Возвращается после выбора файла на элементеFileList, также может быть создан с помощью операции перетаскиванияDataTransferобъекта, а также может исходить отHTMLCanvasElementвыполнить наmozGetAsFile()Метод возвращает результат.

Конструктор FileReader

var reader = new FileReader()

Конструктору не нужно передавать параметры, и он возвращаетFileReaderпример.FileReaderнаследоватьEventTargetобъект.

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

Имя свойства	читай пиши	описывать
error	только чтение	DOMExceptionЭкземпляр , представляющий ошибку, возникшую при чтении файла.
result	только чтение	Содержание файла, этот атрибут действителен только после завершения операции чтения (нагрузка), формат зависит от метода чтения
readyState	только чтение	Число, представляющее состояние, когда файл был прочитан

Примечание: readeyStateЗначения следующие:

стоимость	постоянное имя	описывать
0	EMPTY	Данные еще не загружены
1	LOADING	данные загружаются
2	DONE	Все запросы на чтение выполнены.

Пример использования:

var reader = new FileReader();
console.log(reader.error);       // null
console.log(reader.result);      // null
console.log(reader.readyState);  // 0
console.log(reader.EMPTY);       // 0
console.log(reader.LOADING);     // 1
console.log(reader.DONE);        // 2

EMPTY,LOADING,DONEЭти три свойства существуют одновременно вFileReaderи его объект-прототип, поэтому экземпляр имеет эти три свойства:FileReaderСам объект также имеет эти три свойства:

console.log(FileReader.EMPTY);   // 0
console.log(FileReader.LOADING); // 1
console.log(FileReader.DONE);    // 2

Событие FileReader

Чтение файла является асинхронным процессом, иXMLHttpRequestКак и в случае с объектами, во время операции чтения запускается ряд событий.

название события	описывать	Пример использования
abort	Операция чтения запускается, когда она прерывается.	reader.onabort = function(event) {}
error	Запускается при возникновении ошибки в операции чтения.	reader.onerror = function(event) {}
load	Запускается после завершения операции чтения.	reader.addEventListener('load', function(event) {})
loadstart	Запускается, когда начинается операция чтения.	reader.onloadstart = function(event) {}
loadend	Запускается, когда операция чтения завершается (успешно или неудачно).	reader.onloadend = function(event) {}
progress	Запускается при чтении большого двоичного объекта.	reader.onprogress = function(event) {}

Методы экземпляра FileReader

FileReaderПримеры имеют следующие методы работы:

имя метода	описывать	Пример использования
abort()	Вручную завершайте операцию чтения только тогда, когдаreadyStateЕго можно вызвать только тогда, когда он равен 1. После вызоваreadyStateзначение 2	reader.abort()
readAsArrayBuffer(blob)	Чтение указанногоBlobилиFileобъект. После завершения операции чтения (срабатываетloadendмероприятие),resultсвойство будет содержатьArrayBufferОбъект представляет данные читаемого файла.	reader.readAsArrayBuffer(blob)
readAsDataURL(blob)	читать указанныйBlobилиFileобъект. После завершения операции чтения (срабатываетloadendмероприятие),resultсвойство будет содержатьdata:URLстрока формата (в кодировке base64)	reader.readAsArrayBuffer(file)
readAsBinaryString(blob)	устарело, используйтеreadAsArrayBufferзаменять	--
readAsText(blob[, encoding])	Преобразуйте объект Blob или File в содержимое (строковую форму) в соответствии со специальным форматом кодирования, кодировка по умолчаниюutf-8	reader.readAsArrayBuffer(blob)

Пример чтения локального образа:

<input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" />><br />>
<img src="" alt="Image preview...">

var preview = document.querySelector('img');
var reader  = new FileReader();
reader.addEventListener("load", function () {
  preview.src = reader.result;
}, false);
document.getElementById('file').addEventListener('change', function (event) {
  var file = this.files[0];
  if (file) {
    reader.readAsDataURL(file);
  }
});

Пример чтения множества файлов - CodePen

URL-адрес данныхbase64Формат закодированных данных, тип отображения — строка, например:data:image/jpeg;base64,/9j/4QXERXhpZgAATU...

БудуdataURLПеревести вblobОбъект:

function dataURLToBlob (dataurl) {
  let arr = dataurl.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

Комбинируя приведенный выше пример, согласно существующему<img>объект создаетFileОбъект:

reader.addEventListener("load", function () {
  preview.src = reader.result;
  var blob = dataURLToBlob(reader.result);
  var newFile = new File([blob], 'test.jpeg', {type: blob.type});
  console.log(newFile.name); // test.jpeg
  console.log(newFile.type);
  console.log(newFile.size);
}, false);

URL.createObjectURL

Преобразование файлов изображений вdata:URLформат для<img>Отображение элемента, за исключением использованияfileReader.readAsDataURLКроме того, вы также можете использоватьURL.createObjectURLметод.URL.createObjectURL(blob)метод возвращаетblob:Строка в начале, указывающая на адрес файла в памяти.

<input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" /><br />
<img src="" alt="Image preview...">

var preview = document.querySelector('img');
document.getElementById('file').addEventListener('change', function (event) {
  var file = this.files[0];
  if (file) {
    preview.src = URL.createObjectURL(file);
  }
});

Комплексный пример

На основе вышеизложенного можно реализовать простую функцию вставки картинок и их отображения. Функция редактирования содержимого, предоставляемая HTML5, может вставлять некоторые изображения, например изображения, скопированные с веб-страниц. Однако изображение, снятое с помощью инструмента для создания снимков экрана, нельзя вставить и отобразить, а изображение, скопированное с веб-страницы, будет иметь исходный стиль, а URL-адрес изображения также является точкой исходного изображения. Мы можем использовать следующий код, чтобы объединить эти две операции вставки для достижения единого эффекта.

<div id="comment" contenteditable></div>

#comment{
  border: 1px solid #ccc;
  min-height: 500px;
  padding: 10px;
}
#comment:focus {
  border-color: #ccc;
  outline: none;
}
.img-paste {
  max-width: 100%;
}

var comment = document.getElementById('comment');
comment.addEventListener('paste', function(event) {
  console.log(event);
  var item = event.clipboardData.files[0];
  if (item && /image/.test(item.type)) {
    var img = new Image();
    img.src = URL.createObjectURL(item);
    img.className = 'img-paste';
    this.appendChild(img);
    event.preventDefault();
  }
}, false);

Эффекты экземпляра можно просмотретьздесь.

Ссылка на ссылку

• using files from web apps - MDN
• Blob - MDN
• MIME types - Wikipedia
• MIME TYPES - MDN
• FileReader - MDN
• MIME types - w3school
• Взаимное преобразование Blob/DataURL/canvas/image