Ах, файлы. Мы так много делаем с ними. А в Javascript есть довольно уникальный способ работы с ними прямо в браузере.

Для начала мы можем использовать API File.File () для создания файла.

new File(fileParts, fileName, options?);

Конструктор принимает три аргумента:

  1. fileParts: массив строк, источник буфера или капли
  2. fileName: имя файла в виде строки
  3. options: необязательный объект со свойствами type (тип MIME, например 'text/plain') и lastModified (числовая метка времени в миллисекундах из эпохи Unix)

Пример мог бы выглядеть так:

const myFile = new File(['I am hungry.'], 'myBiography.txt', {
    type: 'text/plain',
});

При выходе myFile отобразится объект со свойствами только для чтения, например:

{
    lastModified: 1594486067967,
    lastModifiedDate: Sat Jul 11 2020 12:47:47,
    name: 'myBiography.txt',
    size: 12,
    type: 'text/plain',
    webkitRelativePath: '',
}

Однако, если быть реалистом, вам обычно не нужно создавать файл для использования в браузере. Наиболее распространенный способ - использовать формы напрямую. Итак, давайте продолжим и создадим ввод файла следующим образом:

И код в нашем HTML:

<input type="file" id="fileInput" />

И в нашем Javascript:

const input = document.querySelector('#fileInput');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
});

Внутри event.target вы можете получить доступ к свойству files, которое представляет собой массив файлов. Поскольку этот ввод позволяет загружать только один файл за раз - в отличие от перетаскивания - в массиве будет только один элемент.

Вот JSFiddle из приведенного выше примера. Попробуйте выйти из консоли file, чтобы увидеть, как это выглядит!

Https://jsfiddle.net/nlemast/tphw249b/18/

Но файл - это всего лишь простой файл. Его свойства доступны только для чтения, и нет собственных методов, позволяющих нам манипулировать им. Итак, чтобы прочитать его содержимое, мы должны использовать APIFileReader. Итак, возвращаясь к нашему примеру кода, давайте попробуем создать экземпляр FileReader и вызвать его метод readAsText следующим образом:

fileInput.addEventListener('change', (event) = {
    const file = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsText(file);
    fileReader.onload = () => {
        console.log(fileReader.result);
    };
});

Отлично работает, если это .txt файл, но как насчет изображений? Для этого мы можем использовать readAsDataURL метод FileReader API. Этот метод считывает наш файл как двоичные данные и кодирует его как URL-адрес в base64, давая нам строку URL-адреса, которую мы можем добавить как изображение src. Теперь, если мы хотим добавить изображение в наш HTML, мы можем создать тег img и просто назначить его src для dataURL.

fileInput.addEventListener('change', (event) = {
    const file = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
        const dataURL = fileReader.result;
        const img = new Image();
        img.src = dataURL;
        // div we add to our DOM
        div.appendChild(img);
    };
});

Вот ссылка на пример!

Https://jsfiddle.net/nlemast/3t6zrkhf/10/