Ах, файлы. Мы так много делаем с ними. А в Javascript есть довольно уникальный способ работы с ними прямо в браузере.
Для начала мы можем использовать API File.File () для создания файла.
new File(fileParts, fileName, options?);
Конструктор принимает три аргумента:
fileParts
: массив строк, источник буфера или каплиfileName
: имя файла в виде строки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); }; });
Вот ссылка на пример!