JavaScript
Файловый API, Blobs и FileReaders

Синтаксис

• reader = new FileReader ();

параметры

замечания

Прочитать файл как строку

Убедитесь, что на вашей странице есть файл.

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

Затем в JavaScript:

document.getElementById('upload').addEventListener('change', readFileAsString)
function readFileAsString() {
    var files = this.files;
    if (files.length === 0) {
        console.log('No file is selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        console.log('File content:', event.target.result);
    };
    reader.readAsText(files[0]);
}

Прочитать файл как dataURL

Чтение содержимого файла в веб-приложении может быть выполнено с помощью API файлов HTML5. Сначала добавьте ввод с type="file" в свой HTML:

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

Затем мы добавим прослушиватель изменений в файл-ввод. Эти примеры определяют слушателя через JavaScript, но его также можно добавить как атрибут на элемент ввода. Этот прослушиватель запускается каждый раз, когда выбран новый файл. В рамках этого обратного вызова мы можем прочитать выбранный файл и выполнить дальнейшие действия (например, создание изображения с содержимым выбранного файла):

document.getElementById('upload').addEventListener('change', showImage);

function showImage(evt) {
    var files = evt.target.files;

    if (files.length === 0) {
        console.log('No files selected');
        return;
    }

    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {
            document.body.appendChild(img);
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(files[0]);
}

Нарезать файл

Метод blob.slice() используется для создания нового объекта Blob, содержащего данные в указанном диапазоне байтов исходного Blob. Этот метод также можно использовать с экземплярами файлов, так как File расширяет Blob.

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

/**
* @param {File|Blob} - file to slice
* @param {Number} - chunksAmount
* @return {Array} - an array of Blobs
**/
function sliceFile(file, chunksAmount) {
  var byteIndex = 0;
  var chunks = [];
    
  for (var i = 0; i < chunksAmount; i += 1) {
    var byteEnd = Math.ceil((file.size / chunksAmount) * (i + 1));
    chunks.push(file.slice(byteIndex, byteEnd));
    byteIndex += (byteEnd - byteIndex);
  }

  return chunks;
}

Клиентская загрузка csv с использованием Blob

function downloadCsv() {
  var blob = new Blob([csvString]);
  if (window.navigator.msSaveOrOpenBlob){
    window.navigator.msSaveBlob(blob, "filename.csv");
  }
  else {
    var a = window.document.createElement("a");

    a.href = window.URL.createObjectURL(blob, {
      type: "text/plain"
    });
    a.download = "filename.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
}
var string = "a1,a2,a3";
downloadCSV(string);

Исходная ссылка; https://github.com/mholt/PapaParse/issues/175

Выбор нескольких файлов и ограничение типов файлов

API-интерфейс HTML5-файла позволяет вам ограничить, какие файлы принимаются, просто установив атрибут accept на вход файла, например:

<input type="file" accept="image/jpeg">

Указание нескольких типов MIME, разделенных запятой (например, image/jpeg,image/png ) или использование подстановочных знаков (например, image/* для разрешения всех типов изображений), дает вам быстрый и мощный способ ограничить тип файлов, которые вы хотите выбрать , Вот пример для разрешения любого изображения или видео:

<input type="file" accept="image/*,video*">

По умолчанию вход в файл позволяет пользователю выбрать один файл. Если вы хотите включить множественный выбор файлов, просто добавьте multiple атрибутов:

<input type="file" multiple>

Затем вы можете прочитать все выбранные файлы через массив файлов ввода files . См. Чтение файла как dataUrl

Получить свойства файла

Если вы хотите получить свойства файла (например, имя или размер), вы можете сделать это перед использованием File Reader. Если у нас есть следующий HTML-код:

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

Вы можете получить доступ к свойствам следующим образом:

document.getElementById('newFile').addEventListener('change', getFile);

function getFile(event) {
    var files = event.target.files
        , file = files[0];

    console.log('Name of the file', file.name);
    console.log('Size of the file', file.size);
}

Вы также можете легко получить следующие атрибуты: lastModified (Timestamp), lastModifiedDate (Дата) и type (Тип файла)