====== Использование файлов из веб-приложений ====== Продолжение https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications Используя File API, веб-контент может попросить пользователя выбрать локальные файлы, а затем прочитать их содержимое. Этот выбор можно сделать либо с помощью [[software:development:web:docs:web:html:element:input:file|]] элемента HTML, либо путем перетаскивания. ===== Доступ к выбранным файлам ===== Рассмотрим этот HTML: API файлов позволяет получить доступ к [[software:development:web:docs:web:api:FileList|FileList]] содержащимся [[software:development:web:docs:web:api:File|File]] объектам, представляющим файлы, выбранные пользователем. Атрибут multipleэлемента inputпозволяет пользователю выбирать несколько файлов. Доступ к первому выбранному файлу с помощью классического селектора DOM: const selectedFile = document.getElementById("input").files[0]; ==== Доступ к выбранным файлам в случае изменения ==== Также возможно (но не обязательно) получить доступ [[software:development:web:docs:web:api:FileList|FileList]] через change событие. Вам нужно использовать [[software:development:web:docs:web:api:EventTarget:addEventListener|EventTarget.addEventListener()]] для добавления changeпрослушивателя событий, например: const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { const fileList = this.files; /* now you can work with the file list */ } ===== Получение информации о выбранных файлах ===== Объект [[software:development:web:docs:web:api:FileList|FileList]], предоставленный DOM, перечисляет все файлы, выбранные пользователем, каждый из которых указан как объект [[software:development:web:docs:web:api:File|File]]. Вы можете определить, сколько файлов выбрал пользователь, проверив значение атрибута списка файлов length: const numFiles = fileList.length; Отдельные [[software:development:web:docs:web:api:File|File]] объекты можно получить, обратившись к списку как к массиву. Объект предоставляет три атрибута [[software:development:web:docs:web:api:File|File]], которые содержат полезную информацию о файле. * [[software:development:web:docs:web:html:attributes:name|name]] Имя файла в виде строки, доступной только для чтения. Это просто имя файла, не содержащее никакой информации о пути. * [[software:development:web:docs:web:html:attributes:size|size]] Размер файла в байтах как 64-битное целое число, доступное только для чтения. * [[software:development:web:docs:web:html:attributes:type|type]] MIME-тип файла в виде строки, доступной только для чтения, или ''""'' если тип не может быть определен. ==== Пример: отображение размера файла(ов) ==== В следующем примере показано возможное использование свойства [[software:development:web:docs:web:html:attributes:size|size]]: File(s) size
0; 0
===== Использование скрытых элементов ввода файла с помощью метода click() ===== Вы можете скрыть заведомо уродливый файловый [[software:development:web:docs:web:html:element:input|]] элемент и предоставить свой собственный интерфейс для открытия средства выбора файлов и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, задав стиль входному элементу ''display:none'' и вызвав [[software:development:web:docs:web:api:HTMLElement:click|click()]] метод этого [[software:development:web:docs:web:html:element:input|]] элемента. Код, обрабатывающий ''click'' событие, может выглядеть так: const fileSelect = document.getElementById("fileSelect"); const fileElem = document.getElementById("fileElem"); fileSelect.addEventListener( "click", (e) => { if (fileElem) { fileElem.click(); } }, false, ); Вы можете стилизовать [[software:development:web:docs:web:html:element:button|