Usar la entrada de formulario para acceder a la cámara y cargar fotos inmediatamente usando la aplicación web


88

Encontré esta respuesta que es brillante:

En iPhone iOS6 y desde Android ICS en adelante, HTML5 tiene la siguiente etiqueta que le permite tomar fotografías desde su dispositivo:

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

La captura puede tomar valores como cámara, videocámara y audio.

¿Es posible llevar esto un paso más allá usando ajax de algún tipo para cargar una foto inmediatamente después de tomarla?

Por ejemplo, usando mi teléfono, una vez que toco la entrada, se abre la cámara que inmediatamente me permitirá tomar una foto y guardarla. Cuando lo guardo en la cámara, aparece junto al botón de entrada como el archivo para cargar.

¿Qué se necesitaría para que esta foto se cargue inmediatamente en lugar de esperar a que el usuario haga clic en el botón Enviar del formulario?


1
¿Qué has probado ya? ¿Qué te has quedado perplejo?
Marcin

Si está interesado en controles de terceros, puede considerar Kendo UI demos.kendoui.com/web/upload/api.html
HaBo

1
@Marcin Nunca he sido fuerte con javascript, así que no estaba seguro de qué intentar. Lo que estoy tratando de replicar es la función de aplicación nativa donde la foto se carga inmediatamente al servicio o al servidor remoto sin un paso adicional después de tomar la foto con la cámara.
miqueas

Respuestas:


103

Es realmente fácil hacer esto, simplemente envíe el archivo a través de una solicitud XHR dentro del controlador onchange de la entrada del archivo.

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

var myInput = document.getElementById('myFileInput');

function sendPic() {
    var file = myInput.files[0];

    // Send file here either by adding it to a `FormData` object 
    // and sending that via XHR, or by simply passing the file into 
    // the `send` method of an XHR instance.
}

myInput.addEventListener('change', sendPic, false);

1
Gracias por esta respuesta. Entonces, ¿este oyente de eventos está observando la entrada # myFileInput para ver un cambio, sabiendo cuándo una foto está en cola para ser cargada? Y luego supongo que ejecutará la función sendPic con el objeto FormData cargando automáticamente la foto. Entiendo lo que es XHR a un nivel muy alto. ¿Lo entendí bien?
miqueas

El detector de eventos se invoca después de que el usuario selecciona un archivo.
Ray Nicholus

Entonces, ¿el oyente de eventos le solicita sendPic()que cargue el archivo inmediatamente después de que la cámara tome la foto?
micah

1
¿Puede indicarme la dirección correcta para saber cómo enviar un formulario a través de XHR?
iluvpinkerton

3
@iluvpinkerton Seguro, usa (o echa un vistazo a) Fine Uploader o ajax-form . Descargo de responsabilidad: soy el desarrollador de ambas bibliotecas.
Ray Nicholus
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.