В JavaScript существует файловый объект; файловый объект представляет собой файл и используется для чтения и записи информации о файле. Этот объект наследует объект Blob и расширяет функции, связанные с файловой системой. Файловый объект можно использовать во всех ситуациях. можно использовать объект Blob; он может использовать конструктор «new File(fileParts, fileName, [options])» для получения файлового объекта.
Операционная среда этого руководства: система Windows 10, версия JavaScript 1.8.5, компьютер Dell G3.
Файловый объект
Объект File представляет файл и используется для чтения и записи информации о файле. Он наследует объект Blob или является специальным объектом Blob, который можно использовать во всех ситуациях, когда можно использовать объект Blob.
Наиболее распространенным вариантом использования является элемент управления загрузкой файла () формы. После того, как пользователь выберет файл, браузер сгенерирует массив, содержащий каждый файл, выбранный пользователем. Все они являются объектами экземпляра File.
// HTML-код выглядит следующим образом // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // trueВ приведенном выше коде file — это первый файл, выбранный пользователем, который является экземпляром File.
Конструктор
Браузер изначально предоставляет конструктор File() для создания объектов экземпляра File.
новый файл (массив, имя [, параметры])
Конструктор File() принимает три параметра.
Массив: Массив, членами которого могут быть двоичные объекты или строки, представляющие содержимое файла.
name: строка, представляющая имя файла или путь к файлу.
Опции: Объект конфигурации, установите атрибуты экземпляра. Этот параметр является необязательным.
Третий параметр настраивает объект и может устанавливать два свойства.
type: строка, указывающая тип MIME объекта экземпляра. Значение по умолчанию — пустая строка.
LastModified: временная метка, указывающая время последнего изменения, по умолчанию — Date.now().
Ниже приведен пример.
var file = new File(['foo'], 'foo.txt', {type: 'text/plain', });Свойства экземпляра и методы экземпляра
Файловые объекты имеют следующие свойства экземпляра.
File.lastModified: время последнего изменения
File.name: имя файла или путь к файлу.
File.size: размер файла (единичные байты)
File.type: MIME-тип файла.
var myFile = new File([], 'file.bin', {lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / /0myFile.type // ""В приведенном выше коде, поскольку содержимое myFile пусто и тип MIME не установлен, атрибут размера равен 0, а атрибут типа равен пустой строке.
Объект File не имеет собственного метода экземпляра. Поскольку он наследует объект Blob, вы можете использовать метод экземпляра Blob (slice()).
Расширьте свои знания:
Есть два способа его получить.
новый файл (fileParts, имя_файла, [опции])
fileParts — массив значений типа Blob/BufferSource/String.
fileName — строка имени файла.
options - необязательный объект:
LastModified — временная метка последнего изменения (целое число).Чаще всего мы получаем файлы из <input type="file">, перетаскивания или других интерфейсов браузера. В этом случае файл получит эту информацию от операционной системы (ОС).
Поскольку File наследует от Blob, объект File имеет те же свойства, а также:
name — имя файла, LastModified — временная метка последней модификации.Вот как мы получаем объект File из <input type="file">:
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; alert(`Имя файла: ${file.name}`); // Например, my.png alert(`Последнее изменение: ${file.lastModified}` // Например, 1552830408824</script> Подробности: 
Пожалуйста, обрати внимание:
Ввод может выбирать несколько файлов, поэтому input.files — это объект, подобный массиву. Здесь у нас есть только один файл, поэтому мы просто берем input.files[0].