Uso del metodo di modulo per accedere alla fotocamera e subito caricare le foto tramite web app

Question

mi sono imbattuto in this answer che è brillante:

In iPhone iOS6 e da Android ICS in poi, HTML5 ha il tag seguente, che ti permette di prendere immagini dal tuo dispositivo:

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

Cattura può prendere valori come fotocamera, videocamera e audio.

È possibile fare un ulteriore passo avanti utilizzando una jax di qualche tipo per caricare immediatamente la foto dopo l'acquisizione?

Ad esempio, utilizzando il mio telefono, dopo aver toccato l'ingresso, si apre la fotocamera che immediatamente mi consentirà di scattare una foto e salvarla. Quando lo salvo sulla fotocamera, viene elencato dal pulsante di input come file da caricare.

Cosa servirebbe per caricare immediatamente questa foto anziché attendere che l'utente faccia clic sul pulsante Invia del modulo?

Answer 1

È davvero facile farlo, è sufficiente inviare il file tramite una richiesta XHR all'interno del gestore onchange dell'ingresso file.

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