Керування введенням файлів HTML із атрибутами захоплення та прийняття працює неправильно?

78

Моя проблема:

Потім користувач клацне, input type=fileкористувач повинен отримати upload file + cameraдіалогове вікно. Я використовую для цього атрибути html acceptі capture. Але на деяких сучасних пристроях цього не відбувається. Нижче наведено приклади коду та таблицю, хто з його робіт працює чи ні. Приклади коду перевіряються в Mobile Safariі Chrome.

TL; DR:

У мене є 5 прикладів коду лише з input type file:

1. ( jsfiddle)

<input type="file" accept="image/*" capture>

2. ( jsfiddle)

<input type="file" accept="image/*" capture="camera">

3. ( jsfiddle)

<input type="file" capture="camera">

4. ( jsfiddle)

<input type="file" capture>

5. ( jsfiddle)

<input type="file" accept="image/*">

Тестові пристрої:

  • Samsung S3 (Android 4.1.2)
  • Samsung S3 (Android 4.3)
  • Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
  • Примітка Samsung (Android 4.1.2)
  • iPhone 5 (iOS 7.0.4)
  • Nexus 4 (Android 4.4)

Таблиця результатів:

  • W (ork) - означає включений upload image dialog with camera
  • P (фактично працює) - означає включений upload dialog(not image only) with camera
  • N (від роботи) - означає only cameraвключений
  • Ch - означає Chrome
  • РС - означає Mobile Safari

#

--------------------------------------------------------------------------------
|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| 
--------------------------------------------------------------------------------
|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |
--------------------------------------------------------------------------------
|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

Як бачите, я можу отримати лише upload file + cameraдіалогове вікно для всіх браузерів, що використовують

<input type="file" accept="image/*">тільки. Але немаєcapture в цьому випадку атрибута , і це мене турбує, і є проблема з Android 4.3.

Мої запитання:

  1. Чи поведінка в таблиці відповідає дійсності? Поведінка Android 4.3 - це помилка?
  2. Чи можу я довіряти браузерам, що завжди додаватиме діалогове вікно для завантаження без атрибута зйомки? (Будь ласка, додайте посилання для підтвердження відповіді)

Дякую.

PS Питання особливе, але на своєму сайті я повинен надати користувачам доступ до його зображень та камери. Також я думаю, що моя таблиця може бути корисною для будь-кого, а також я буду шукати відповідь і розміщу свою відповідь тут, якщо ніхто не відповість.

android  ios  html  mobile 
— Пінальний
джерело
Це питання не стосується API JavaScript. Це про поведінку браузера з input type file. Я не хочу читати файл. Я просто якому користувачеві надати доступ до нього зображення / камери на моєму сайті.
— Піналь
— Раскін
Так. The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred. Але я хочу знати, чи працює мій приклад (один із них) без capture. Чи така поведінка стала в майбутньому? Чи є якийсь проект / документи щодо цього.
— Піналь
1
W3C Candidate Recommendationє практично стабільним API. Далі - W3C Recommendationце означає, що це ніколи не зміниться. Modernizrне мають виявлення для захоплення. Flash для мобільного? Це несерйозно.
— Піналь
1
@YonnTrimoreau Я думаю, це означає З -> Робота
— Піналь

Відповіді:

34

Це власне відповідь. Просто опублікуйте його тут для наступних користувачів:

Насправді, здається, що поточні реалізації взагалі не покладаються на атрибут capture, а лише на атрибути type і accept: браузер відображає діалогове вікно, в якому користувач може вибрати, куди потрібно взяти файл, і captureатрибут не враховується. Наприклад, iOS Safari покладається на атрибут accept (не захоплення) для зображень та відео (не аудіо). Навіть якщо ви не використовуєте acceptатрибут, браузер дозволить вам вибрати між "Зробити фото чи відео" та "Вибрати існуючого" (дякую @ firt, що вказав на це).

З цього

ВИДАЛЕНО 17 лютого 2016: Ця поведінка все ще активна на пристроях.

— Пінальний
джерело
3
FYI. Я вважаю, що якщо ви використовуєте атрибут multiple = "multiple" на iOS, мобільне сафарі обійде вибір і перейде прямо до множинного вибору.
— tommybananas
мобільне сафарі (MS) означає мобільний веб-комплект, а не лише Safari в iOS.
— Піналь
А як щодо планшетів Windows, на яких запущено Chrome? Це «функція» ОС або браузер?
— JCS
1
@Pinal, спробував сьогодні на планшеті Windows під управлінням Chrome, і він продовжував ходити до галереї, а не показувати два варіанти: сфотографувати або використовувати зображення галереї.
— JCS
6
@Pinal ця відповідь більше не правильна. iOS 10.3.1 змінено відповідно до специфікації, і тепер за допомогою захоплення буде обійдено вибір вибору зображень із бібліотеки фотографій. Наприклад, див. Stackoverflow.com/questions/43396109/…
— Девід
28

"Правильний" код і той, який ви повинні використовувати, є 5-м:

<input type="file" accept="image/*">

Ось чому він працює правильно на більшості ваших пристроїв. Наведений вище код правильний , повний і достатній, щоб сказати як iOS, так і Android, що:

  1. ви хочете зробити знімок (використовуйте accept="video/*"для відео та accept="audio/*"для аудіо, пропустіть взагалі, щоб дозволити що-небудь).
  2. користувач повинен мати можливість вибрати існуючий АБО захопити його на місці
  1. Чи можу я довіряти браузерам, що завжди додаватиме діалогове вікно для завантаження без атрибута зйомки?

Так.

captureАтрибут не використовується для включення опції камери в діалоговому вікні ( <input type="file">досить для цього) , але щоб показати , що пряме захоплення з веб - камери є кращим . З специфікації рекомендації W3C :

Атрибут capture - це логічний атрибут, який, якщо вказано, вказує на те, що переважним є захоплення медіа безпосередньо з пристрою ...

captureпідтримується Android 3.0+, який переведе вас прямо до програми камери, якщо captureвона присутня в коді.

У iOS6-10 немає підтримки, яка завжди надасть вам принаймні 2 варіанти: "Зробити фото" + "Бібліотека фотографій".

captureАтрибут еволюціонував в специфікації (саме тому ви побачите кілька версій по всьому StackOverflow):

  1. Липень 2010: accept="image/*;capture=camera"
  2. Квітень 2011: capture="camera"(Рядок)
  3. Грудень 2012: capture(Булева, Рекомендація кандидата W3C ,)

PS: Я провів безліч досліджень з питань захоплення медіа HTML, див. Правильний синтаксис для захоплення медіа HTML та Новий запит для захоплення медіа в iOS9 . Ось мій тестовий стенд із 20+ комбінаціями кодів.

— Октавіан Найку
джерело
Неправильну відповідь. Я не хотів робити знімок. Я хотів надати користувачеві доступ до камери та доступ до завантаження файлів. І правильна відповідь - "атрибут capture для цього взагалі не має сенсу".
— Піналь
1
Процитований код надає вам як доступ до камери, так і доступ до завантаження файлів для користувача. Використовуйте, captureколи потрібно лише доступ до камери (наразі працює лише на Android).
— Октавіан Найку
Я оновив свою відповідь, включивши варіанти аудіо , відео та всього (просто видаліть accept="image/*"частину, щоб дозволити все )
— Октавіан Найку
ПРИМІТКА: Увімкніть дозволи браузера, наприклад на android / firefox: Налаштування> Менеджер програм> Firefox> Дозволи> "Увімкнути камеру"
— jmunsch
6

Інші посилаються на таку поведінку в Chrome на Android 9 станом на сьогодні (лютий 2020 р.):

  Must be selected from album
  <input type="file" accept="image/*">

  Must be captured from camera
  <input type="file" accept="image/*" capture="">

  Allowed user to choose either from album or camera
  <input type="file" accept="image/*;capture=camera">
— Беено Тунг
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.