worldwide open-source software

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Использование файлов из веб-приложений ======

<fc #ed1c24>Продолжение https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications</fc>

Используя File API, веб-контент может попросить пользователя выбрать локальные файлы, а затем прочитать их содержимое. Этот выбор можно сделать либо с помощью [[software:development:web:docs:web:html:element:input:file|<input type="file">]] элемента HTML, либо путем перетаскивания.

===== Доступ к выбранным файлам =====

Рассмотрим этот HTML:

<code html HTML>
<input type="file" id="input" multiple />
</code>

API файлов позволяет получить доступ к [[software:development:web:docs:web:api:FileList|FileList]] содержащимся [[software:development:web:docs:web:api:File|File]] объектам, представляющим файлы, выбранные пользователем.

Атрибут multipleэлемента inputпозволяет пользователю выбирать несколько файлов.

Доступ к первому выбранному файлу с помощью классического селектора DOM:

<code javascript JS>
const selectedFile = document.getElementById("input").files[0];
</code>

==== Доступ к выбранным файлам в случае изменения ====

Также возможно (но не обязательно) получить доступ [[software:development:web:docs:web:api:FileList|FileList]] через change событие. Вам нужно использовать [[software:development:web:docs:web:api:EventTarget:addEventListener|EventTarget.addEventListener()]] для добавления changeпрослушивателя событий, например:

<code javascript JS>
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}
</code>

===== Получение информации о выбранных файлах =====
Объект [[software:development:web:docs:web:api:FileList|FileList]], предоставленный DOM, перечисляет все файлы, выбранные пользователем, каждый из которых указан как объект [[software:development:web:docs:web:api:File|File]]. Вы можете определить, сколько файлов выбрал пользователь, проверив значение атрибута списка файлов length:
<code javascript JS>
const numFiles = fileList.length;
</code>
Отдельные [[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]]:
<code html HTML>
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
  </head>

  <body>
    <form name="uploadForm">
      <div>
        <input id="uploadInput" type="file" multiple />
        <label for="fileNum">Selected files:</label>
        <output id="fileNum">0</output>;
        <label for="fileSize">Total size:</label>
        <output id="fileSize">0</output>
      </div>
      <div><input type="submit" value="Send file" /></div>
    </form>

    <script>
      const uploadInput = document.getElementById("uploadInput");
      uploadInput.addEventListener(
        "change",
        () => {
          // Calculate total size
          let numberOfBytes = 0;
          for (const file of uploadInput.files) {
            numberOfBytes += file.size;
          }

          // Approximate to the closest prefixed unit
          const units = [
            "B",
            "KiB",
            "MiB",
            "GiB",
            "TiB",
            "PiB",
            "EiB",
            "ZiB",
            "YiB",
          ];
          const exponent = Math.min(
            Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
            units.length - 1,
          );
          const approx = numberOfBytes / 1024 ** exponent;
          const output =
            exponent === 0
              ? `${numberOfBytes} bytes`
              : `${approx.toFixed(3)} ${
                  units[exponent]
                } (${numberOfBytes} bytes)`;

          document.getElementById("fileNum").textContent =
            uploadInput.files.length;
          document.getElementById("fileSize").textContent = output;
        },
        false,
      );
    </script>
  </body>
</html>
</code>

===== Использование скрытых элементов ввода файла с помощью метода click() =====
Вы можете скрыть заведомо уродливый файловый [[software:development:web:docs:web:html:element:input|<input>]] элемент и предоставить свой собственный интерфейс для открытия средства выбора файлов и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, задав стиль входному элементу ''display:none'' и вызвав [[software:development:web:docs:web:api:HTMLElement:click|click()]] метод этого [[software:development:web:docs:web:html:element:input|<input>]] элемента.

Код, обрабатывающий ''click'' событие, может выглядеть так:

<code javascript JS>
const fileSelect = document.getElementById("fileSelect");
const fileElem = document.getElementById("fileElem");

fileSelect.addEventListener(
  "click",
  (e) => {
    if (fileElem) {
      fileElem.click();
    }
  },
  false,
);
</code>

Вы можете стилизовать [[software:development:web:docs:web:html:element:button|<button>]] как пожелаете.

Продолжение https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications