web-dev-qa-db-fra.com

Utilisation de la saisie de formulaire pour accéder à l'appareil photo et télécharger immédiatement des photos à l'aide d'une application Web

Je suis tombé sur cette réponse qui est brillant:

Dans l'iPhone iOS6 et à partir de Android ICS, version ultérieure), HTML5 comporte la balise suivante qui vous permet de prendre des photos à partir de votre appareil:

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

La capture peut prendre des valeurs telles que caméra, caméscope et audio.

Est-il possible d'aller plus loin en utilisant un type de fichier ajax pour télécharger immédiatement une photo après l'avoir prise?

Par exemple, à l'aide de mon téléphone, une fois que je touche l'entrée, la caméra s'ouvre, ce qui me permet immédiatement de prendre une photo et de l'enregistrer. Lorsque je l'enregistre sur l'appareil photo, il est ensuite répertorié par le bouton d'entrée en tant que fichier à télécharger.

Que faudrait-il pour que cette photo soit immédiatement téléchargée au lieu d'attendre que l'utilisateur clique sur le bouton Soumettre du formulaire?

javascripthtml5formsweb-applicationsmobile
70
micah

C'est très facile, envoyez simplement le fichier via une requête XHR à l'intérieur du gestionnaire onchange de l'entrée de fichier.

<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);
85
Ray Nicholus