Control de entrada de archivos HTML con capturar y aceptar atributos funciona mal?
Mi problema:
A continuación, haga clic en el input type=file
usuario de input type=file
debe obtener el upload file + camera
diálogo. Estoy utilizando para este html atributos accept
y capture
. Pero en algunos dispositivos modernos esto no sucede. Debajo están los ejemplos de código y la tabla que de sus obras o no. Los ejemplos de código se prueban en Mobile Safari
y Chrome
.
TL, DR:
- Aplicación móvil nativa que utiliza el lenguaje de dardo google
- Android - ¿Es posible acceder a datos de entrada capacitivos en bruto?
- Phonegap obtener valores localstorage de código Java?
- ¿Cómo funcionan los SDK móviles de plataforma cruzada C ++ en general bajo el capó?
- Los vínculos / iconos que se generan en codebehind no aparecen en ciertos dispositivos móviles
Tengo 5 ejemplos de código con sólo 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 habilitado para
upload image dialog with camera
- P (funciona artificialmente) – significa el
upload dialog(not image only) with camera
habilitadoupload dialog(not image only) with camera
- N (ot work) – significa
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 puedes ver, solo puedo upload file + camera
diálogo de upload file + camera
para todos los navegadores que usen
<input type="file" accept="image/*">
sólo. Pero no hay atributo de capture
en este caso, y esto me preocupa y hay un problema con Android 4.3.
Mis preguntas son:
- ¿Son verdaderos los comportamientos en la tabla? ¿El comportamiento de Android 4.3 es un error?
- ¿Puedo confiar en los navegadores lo que siempre agregará cámara para subir diálogo sin atributo de captura? (Por favor agregue enlaces de prueba para la respuesta)
Gracias.
PS Pregunta es especial, pero en mi sitio debo proporcionar a los usuarios el acceso a sus imágenes y cámara. También pienso que mi tabla puede ser provechosa para cualquier persona y también buscaré la respuesta a y fijaré mi respuesta aquí si nadie contesta.
- ¿Necesito un dispositivo Android real para desarrollar una aplicación de Android para el mercado?
- Herramientas de creación de prototipos para aplicaciones móviles
- Ancho de pantalla Problema al utilizar diferentes navegadores en dispositivos portátiles / inteligentes
- Permitiendo arrastrar y soltar en un dispositivo móvil con pantalla táctil
- ¿Cuáles son las diferencias entre T-Mobile G1 (marca HTC Dream) y ADP1 de Google (dispositivo para desarrolladores)?
- ¿Es posible desarrollarse para Android en Android?
- Mejores prácticas para seleccionar una base de datos para aplicaciones móviles
- JQuery Mobile nativa no trabaja en droid
Esta es la respuesta real. Simplemente publícala aquí para los siguientes usuarios:
En realidad, parece que las implementaciones actuales no se basan en el atributo de captura en absoluto, sino sólo 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 tiene en cuenta. Por ejemplo, iOS Safari se basa en el atributo accept (no captura) para imágenes y videos (no audio). Incluso si no utiliza el atributoaccept
, el navegador le permitirá elegir entre "Take Photo o Video" y "Choose Existing" (gracias a @ firt por señalar esto).
De esto
EDITED 17 Feb 2016: Este comportamiento sigue activo en los dispositivos.
El código "correcto" y el que debe usar es el 5º:
<input type="file" accept="image/*">
Es por eso que funciona correctamente en la mayoría de sus dispositivos. El código anterior es correcto , completo y suficiente para decir a iOS y Android que:
- Desea capturar una imagen (use
accept="video/*"
para video yaccept="audio/*"
para audio, salte por completo para permitir cualquier cosa). - El usuario debe ser capaz de seleccionar uno existente o capturarlo en el acto
- ¿Puedo confiar en los navegadores lo que siempre agregará cámara para subir diálogo sin atributo de captura?
Sí.
El atributo de capture
NO se utiliza 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 capturar directamente desde la webcam. De la especificación de Recomendación del 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 le llevará directamente a la aplicación de cámara si la capture
está presente en el código.
No hay soporte en iOS6-10 que siempre le dará al menos dos opciones: "Tomar fotos" + "Photo Library".
El atributo de capture
ha evolucionado en la especificación (por lo que verá varias versiones en StackOverflow):
- Julio de 2010:
accept="image/*;capture=camera"
- Apr 2011:
capture="camera"
(cadena) - Dic 2012:
capture
(Boolean, Recomendación del candidato al W3C )
PS: He hecho un montón de investigación sobre la Captura de Medios HTML, vea Sintaxis Correcta para la Captura de Medios HTML y la Nueva Solicitud de Captura de Medios en iOS9 . Aquí está mi banco de pruebas con más de 20 combinaciones de código.
- Android Studio No se pudo encontrar el método runProguard () para los argumentos?
- No se puede hacer el DialogFragment personalizado transparente sobre el fragmento