Тщательно понимать манипулирование файлами и двоичными данными

Blob Blob Объект представляет собой неизменяемый объект, похожий на файл необработанных данных. Большие двоичные объекты не обязательно представляют данные в собственном формате JavaScript.Fileинтерфейс на основеBlob, который наследует функциональные возможности BLOB-объектов и расширяет их для поддержки файлов в системе пользователя.
Чтобы создать один из других объектов и данных, не являющихся BLOB-объектамиBlob,пожалуйста, используйтеBlob()Конструктор. Чтобы создать большой двоичный объект подмножества, содержащий данные из другого большого двоичного объекта, используйтеslice()метод. Чтобы получить соответствующий файл в файловой системе пользователяBlobОбъекты, смFileдокументация.
FileList Этот объект обычно берется из элемента ввода HTML.filesсвойство, вы можете получить доступ к файлу, выбранному пользователем через этот объект
Интерфейс File предоставляет информацию о файле и позволяет JavaScript на веб-странице получать доступ к его содержимому.
FileReader FileReaderОбъекты позволяют веб-приложениям асинхронно считывать содержимое файла (или буфера необработанных данных), хранящегося на компьютере пользователя, используяFileилиBlobОбъект указывает файл или данные для чтения.
где объект File может быть от пользователя в<input>Возвращается после выбора файла на элементеFileListОбъекты, которые также могут быть созданы с помощью операций перетаскивания.DataTransferобъекта, а также может исходить отHTMLCanvasElementвыполнить наmozGetAsFile()Метод возвращает результат.
URL-адрес (не поддерживается браузерами IE)

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

Объект Blob (Binary Large Object) представляет часть двоичных данных. Другие интерфейсы для работы с двоичными данными основаны на этом объекте.

Метод создания объекта Blob: 1. Используйте конструктор Blob, 2. Разрежьте существующий метод среза объекта Blob на мелкие части, сценарии приложения: возобновление точки останова больших файлов.

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

let blob = new Blob(["Hello World"],{ "type" : "text\/xml" });
let a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "点击我，可以生产一个hello-word.txt的文件";
document.body.appendChild(a);

(2) Метод slice объекта Blob используется для вырезания и создания нескольких новых объектов Blob.

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  let blob = this.files[0];  //通过此方法获取的数据为二进制数据

  const BYTES_PER_CHUNK = 1024 * 1024; // 定义切割单元1M
  const TOTLE_SIZE = blob.size;  //文件的总大小

  let start = 0;
  let end = BYTES_PER_CHUNK;

  while(start < TOTLE_SIZE ) {   //将 blob.slice(start, end) 作为数据，分割上传文件到服务器，再由服务端把分离的二进制数据合并为一个完整的数据
    // 注意：ajax中，xhr.responseType  设置为blob,那么服务器接收的就是二进制数据。
    // 在上传过程中，如果断网，断电，或者用户刷新啦页面，可能有部分未上传成功的二进制小块。那个下次上传的时候
    // 就可以只上传未上传成功的部分资源。当然这需要服务器端的配合。    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

2. Объект списка файлов

Объекты FileList нацелены на . Когда пользователь выбирает файл с помощью тега , значением атрибута files этого тега является объект FileList. Он структурирован как массив и содержит несколько файлов, выбранных пользователем.

<input type="file" id="input" onchange="console.log(this.files)" multiple />
//选择了两个文件后，控制台可以看到FileList对象中有两个File，分别是选择文件的二进制数据。

Рисунок 1-1 Результат печати файла

Сегодняшние пользователи ленивы и часто предпочитают метод перетаскивания. FileList также можно получить путем перетаскивания, что удобно для пользователей при загрузке файлов.

let dropZone = document.getElementById('body');
dropZone.addEventListener('drop', handleFileSelect, false);
//防止把文件拖入网页时，资源以url的形式打开。
dropZone.ondragover = function () { return false; };
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    let files = evt.dataTransfer.files; // 里面包含了拖放的文件。
    console.log(files )    
}

3.File API

Файловый API предоставляетFileобъект, этоFileListЧлены объекта содержат некоторую метаинформацию о файле, такую как имя файла, время последней модификации, размер файла и тип файла. (Рисунок 1-1)

4.FileReader API

API FileReader используется для чтения файлов, то есть для чтения содержимого файла в память. Его параметром является объект File или объект Blob.

Для разных типов файлов Fileheader предоставляет различные методы для чтения файлов.

readAsBinaryString(Blob|File): возвращает двоичную строку, содержащую целое число от 0 до 255 на байт. (Этот метод устарел, и официально рекомендуется readAsArrayBuffer())
readAsText(Blob|File, opt_encoding): возвращает текстовую строку. По умолчанию формат кодировки текста "UTF-8". Вы можете указать текст в других форматах кодировки через необязательные параметры формата (вы можете получить содержимое локальных .txt, .bat и других файлов, прочитать слово, и Excell будет искажено).
readAsDataURL(Blob|File): возвращает объект data-url в кодировке Base64.
readAsArrayBuffer(Blob|File): возвращает объект ArrayBuffer.

Объект FileReader асинхронно читает файлы и может указывать функции обратного вызова для серии событий.

Метод onabort: срабатывает, когда чтение прерывается или вызывается метод reader.abort().
Метод onerror: срабатывает при возникновении ошибки чтения.
метод onload: срабатывает после успешного чтения.
Метод onloadend: срабатывает после завершения чтения, независимо от того, успешно оно или нет. Порядок срабатывания приходит после onload или onerror.
Метод onloadstart: срабатывает, когда чтение вот-вот начнется.
метод onprogress: периодически срабатывает в процессе чтения

网页获取.txt , .bat 文本内容
let reader = new FileReader();
reader.onload = function(e) {
  //console.log(e.target.result);
console.log(this.result);}
reader.readAsText(blob);

5. URL-адрес объекта

Объекты URL используются для создания URL-адресов объектов File или Blob.

let objecturl =  URL.createObjectURL(object);  //object File对象、Blob对象、MediaSource对象。
img.src = objecturl   //跟readFile 对象差不多。同样可以展示图片在网页上

//window.URL.revokeObjectURL(objecturl);  //让url对象失效

Приведенный выше код сгенерирует URL-адрес для двоичных данных, что-то вроде «blob:http%3A//test.com/2342e6730-f45c-47c1-8012-ccc706f17192». Этот URL-адрес можно разместить в любом месте, где обычно размещается URL-адрес, например, в атрибуте src тега img. Следует отметить, что даже при одних и тех же бинарных данных каждый раз при вызове метода URL.createObjectURL будет получаться другой URL.

Время существования этого URL равно времени существования веб-страницы. После обновления или удаления веб-страницы URL-адрес станет недействительным. Кроме того, вы также можете вручную вызвать метод URL.revokeObjectURL, чтобы сделать URL-адрес недействительным.

Сан Ниан, вы знаете, как достичь финансовой свободы? Сканируйте и подписывайтесь на официальную учетную запись, и вы попадете на путь к финансовой свободе!

Ссылаться на:

www.w3.org/TR/FileAPI/

developer.Mozilla.org/this-cn/docs/…

Стандартное справочное руководство по JavaScript (альфа-версия)

developer.Mozilla.org/this-cn/docs/…