Различия

Показаны различия между двумя версиями страницы.

--- software:development:web:docs:web:html:attributes:accept [2023/08/25 20:25] – [Пример] vladpolskiy
+++ software:development:web:docs:web:html:attributes:accept [2023/08/25 21:11] (текущий) – [Ограничение допустимых типов файлов] vladpolskiy
@@ Строка 37: / Строка 37: @@
 Если задан тип ввода файла, открывающееся средство выбора файлов должно позволять выбирать только файлы правильного типа. Большинство операционных систем облегчают файлы, которые не соответствуют критериям и недоступны для выбора.
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+Обратите внимание, что последний пример позволяет вам выбрать несколько изображений. См. [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибут для получения дополнительной информации.
+===== Уникальные спецификаторы типов файлов =====
+Уникальный спецификатор типа файла — это строка, описывающая тип файла, который может быть выбран пользователем в [[software:development:web:docs:web:html:element:input|<input>]] элементе type ''file''. Каждый уникальный спецификатор типа файла может принимать одну из следующих форм:
+  * Допустимое расширение имени файла без учета регистра, начинающееся с точки (""."). Например: ''.jpg'', ''.pdf'', или ''.doc''.
+  * Действительная строка типа MIME без расширений.
+  * Строка, ''audio/*'' означающая «любой аудиофайл».
+  * Строка, ''video/*'' означающая «любой видеофайл».
+  * Строка, ''image/*'' означающая «любой файл изображения».
+Атрибут ''accept'' принимает в качестве значения строку, содержащую один или несколько уникальных спецификаторов типов файлов, разделенных запятыми. Например, средство выбора файлов, которому требуется контент, который может быть представлен в виде изображения, включая как стандартные форматы изображений, так и файлы PDF, может выглядеть так:
 <code html HTML>
-<p>
+<input type="file" accept="image/*,.pdf" />
-  <label for="soundFile">Select an audio file:</label>
-  <input type="file" id="soundFile" accept="audio/*" />
-</p>
-<p>
-  <label for="videoFile">Select a video file:</label>
-  <input type="file" id="videoFile" accept="video/*" />
-</p>
-<p>
-  <label for="imageFile">Select some images:</label>
-  <input type="file" id="imageFile" accept="image/*" multiple />
-</p>
 </code>
+===== Использование файловых входов =====
 <html>
-<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-1.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-2.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+</iframe>
+</html>
+Независимо от устройства или операционной системы пользователя, при вводе файла имеется кнопка, открывающая диалоговое окно выбора файла, позволяющее пользователю выбрать файл.
+Включение [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибута, как показано выше, указывает, что одновременно можно выбрать несколько файлов. Пользователь может выбрать несколько файлов из средства выбора файлов любым способом, который позволяет выбранная им платформа (например, удерживая нажатой кнопку **Shift** или **Control** и затем щелкнув). Если вы хотите, чтобы пользователь выбирал только один файл для каждого [[software:development:web:docs:web:html:element:input|<input>]], опустите [[software:development:web:docs:web:html:attributes:multiple|multiple]] атрибут.
+==== Ограничение допустимых типов файлов ====
+Часто вы не захотите, чтобы пользователь мог выбрать любой произвольный тип файла; вместо этого вы часто хотите, чтобы они выбирали файлы определенного типа или типов. Например, если ваш входной файл позволяет пользователям загружать изображение профиля, вы, вероятно, захотите, чтобы они выбрали веб-совместимые форматы изображений, такие как [[software:development:web:docs:glossary:JPEG|JPEG]] или [[software:development:web:docs:glossary:PNG|PNG]].
+Приемлемые типы файлов можно указать с помощью [[software:development:web:docs:web:html:element:input:file#accept|accept]] атрибута, который принимает разделенный запятыми список разрешенных расширений файлов или типов MIME. Некоторые примеры:
+  * ''accept="image/png"'' или ''accept=".png"''— принимает файлы PNG.
+  * ''accept="image/png, image/jpeg"'' или ''accept=".png, .jpg, .jpeg"''— Принимать файлы PNG или JPEG.
+  * ''accept="image/*"''— Принять любой файл с ''image/*'' типом MIME. (Многие мобильные устройства также позволяют пользователю делать снимки с помощью камеры, когда она используется.)
+  * ''accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"'' — принимайте все, что схожи с документом MS Word.
+Давайте посмотрим на более полный пример:
+<html>
+<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/tabbed/attribute-accept-3.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 </iframe>
 </html>