javascript - validacion - Usar la entrada de formulario para acceder a la cámara y subir fotos de inmediato con la aplicación web

validar formulario javascript html5

Question

Me encontré con esta respuesta que es brillante:

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

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

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

¿Es posible dar un paso más al usar ajax de algún tipo para cargar una foto inmediatamente después de su captura?

Por ejemplo, al usar 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 listado por el botón de entrada como el archivo para cargar.

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

Answer 1

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);