android - texto - que significa atributo alt
El control de entrada de archivos HTML con atributos de captura y aceptación funciona mal? (2)
Mi problema:
Luego haga clic en el input type=file
usuario del input type=file
debe obtener el upload file + camera
cuadro de diálogo de la upload file + camera
. Estoy usando los atributos html accept
y capture
. Pero en algunos dispositivos modernos esto no sucede. A continuación están los ejemplos de código y la tabla que de sus obras funciona o no. Los ejemplos de código se prueban en Mobile Safari
y Chrome
.
TL; DR:
Tengo 5 ejemplos de código con solo 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/*">
Dispositivos de prueba:
- Samsung S3 (Android 4.1.2)
- Samsung S3 (Android 4.3)
- Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
- Samsung Note (Android 4.1.2)
- iPhone 5 (iOS 7.0.4)
- Nexus 4 (Android 4.4)
Tabla de resultados:
- W (ork) - significa que el
upload image dialog with camera
habilitadoupload image dialog with camera
- P (funciona artísticamente) - significa
upload dialog(not image only) with camera
habilitadoupload dialog(not image only) with camera
- N (ot work) - significa que
only camera
habilitada - Ch - significa
Chrome
- MS - significa
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 | - | - | - | - | - |
--------------------------------------------------------------------------------
Como puede ver, solo puedo upload file + camera
cuadro de diálogo de upload file + camera
para todos los navegadores usando
<input type="file" accept="image/*">
solamente. Pero no hay ningún atributo de capture
en este caso, y esto me preocupa y hay un problema con Android 4.3.
Mis preguntas son:
- ¿Los comportamientos en la mesa son verdaderos? El comportamiento de Android 4.3 es un error?
- ¿Puedo confiar para los navegadores en qué agregará siempre la cámara al diálogo de carga sin el atributo de captura? (Agregue enlaces de prueba para la respuesta)
Gracias.
La pregunta de PS es especial, pero en mi sitio debo proporcionar a los usuarios acceso a sus imágenes y a su cámara. También creo que mi mesa puede ser útil para cualquiera y también buscaré una respuesta y publicaré mi respuesta aquí si nadie contesta.
El código "correcto" y el que debe usar es el 5º:
<input type="file" accept="image/*">
Por eso funciona correctamente en la mayoría de sus dispositivos. El código anterior es correcto , completo y suficiente para indicar a iOS y Android que:
- Desea capturar una imagen (use
accept="video/*"
para video yaccept="audio/*"
para audio, omita por completo para permitir cualquier cosa). - el usuario debería poder seleccionar uno existente O capturarlo en el acto
- ¿Puedo confiar para los navegadores en qué agregará siempre la cámara al diálogo de carga sin el atributo de captura?
Sí.
El atributo de capture
NO se usa para incluir la opción de cámara en el cuadro de diálogo ( <input type="file">
es suficiente para eso), sino para indicar que se prefiere la captura directa desde la cámara web. De la especificación de recomendación W3C :
El atributo de captura es un atributo booleano que, si se especifica, indica que se prefiere la captura de medios directamente desde el dispositivo ...
capture
es compatible con Android 3.0+ que lo llevará directamente a la aplicación de la cámara si la capture
está presente en el código.
No hay soporte en iOS6-10 que siempre te brinde al menos 2 opciones: "Tomar foto" + "Biblioteca de fotos".
El atributo de capture
ha evolucionado en la especificación (por lo que verá varias versiones en ):
- Julio de 2010:
accept="image/*;capture=camera"
- Abr 2011:
capture="camera"
(Cadena) - Diciembre de 2012:
capture
(Boolean, Recomendación del candidato W3C ,)
PD: He realizado una tonelada de investigación sobre Captura de Medios HTML, vea Corregir Sintaxis para Captura de Medios HTML y La Nueva Petición de Captura de Medios en iOS9 . Aquí está mi banco de pruebas con más de 20 combinaciones de códigos.
Esta es la respuesta real. Solo publícalo aquí para los siguientes usuarios:
En realidad, parece que las implementaciones actuales no se basan en absoluto en el atributo de captura, sino solo en los atributos de tipo y aceptación: el navegador muestra un cuadro de diálogo en el que el usuario puede elegir dónde se debe tomar el archivo y la
capture
atributo no se toma en consideración. Por ejemplo, iOS Safari se basa en el atributo de aceptación (no captura) para imágenes y videos (no audio). Incluso si no usa el atributo deaccept
, el navegador le permitirá elegir entre "Tomar foto o video" y "Elegir existente" (gracias a @firt para señalar esto).
De this
EDITADO 17 de febrero de 2016: Este comportamiento todavía está activo en dispositivos.