À l'aide du formulaire d'entrée pour accéder à la caméra et immédiatement télécharger des photos à l'aide de web app

Je suis tombé sur cette réponse qui est génial:

De l'iPhone iOS6 et à partir d'Android ICS partir, HTML5 est la suivante
la balise qui permet de prendre des photos à partir de votre appareil:

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

Capture peut prendre des valeurs comme l'appareil photo, caméscope et audio.

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

Par exemple, à l'aide de mon téléphone, une fois que je tape sur entrée, il ouvre alors la caméra qui sera immédiatement permettez-moi de prendre une photo et de l'enregistrer. Quand je l'enregistre à la caméra, il est alors répertorié par la touche d'entrée que le fichier à télécharger.

Que faudrait-il faire pour que cette photo soit immédiatement mis en ligne au lieu d'attendre que l'utilisateur clique sur le bouton Submit du formulaire?

  • Qu'avez-vous déjà essayé? Ce qui vous a bloqué?
  • Si vous êtes intéressé dans la 3ème partie de contrôles, vous pouvez envisager de Kendo UI demos.kendoui.com/web/upload/api.html
  • Je n'ai jamais été forte avec javascript donc je n'étais pas sûr de ce que d'essayer. Ce que j'essaie de reproduire est natif de fonction d'application où la photo obtient immédiatement téléchargées sur le service ou le serveur à distance, sans étape supplémentaire après la prise de photo avec l'appareil photo.
InformationsquelleAutor micah | 2013-06-21
  1. 85

    C'est vraiment facile à faire, il suffit d'envoyer le fichier via une demande XHR à l'intérieur du fichier d'entrée du onchange gestionnaire.

    <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);
    • Merci pour cette réponse. Donc, cet écouteur d'événement est en regardant l'entrée n ° myFileInput pour un changement, à savoir quand une photo est mis en file d'attente pour être transféré? Et puis je suppose qu'il va exécuter la sendPic fonction avec le FormData objct automatiquement de télécharger la photo? Je comprends ce que XHR est à un niveau très élevé. Ai-je droit?
    • L'écouteur d'événement est invoqué lorsque l'utilisateur sélectionne un fichier.
    • Si l'écouteur d'événement invite l' sendPic() immédiatement télécharger le fichier après l'appareil photo prend la photo?
    • En supposant que vous ajoutez le code approprié, comme indiqué dans mes commentaires, oui.
    • Merci, c'est super. J'ai besoin de le tester, mais c'est la réponse et l'explication que je cherchais!
    • Essayé ce code dans android jelly bean, sa ne s'ouvre la galerie. Comment puis-je ouvrir l'appareil photo fonction? Dans ios sa fonctionne bien
    • Pouvez-vous me diriger dans la bonne direction pour trouver comment envoyer un formulaire via XHR?
    • Bien sûr, l'utilisation (ou de prendre un coup d'oeil à) Fine Uploader ou ajax-formulaire. Avertissement - je suis le développeur des deux bibliothèques.
    • <input type="file" name="image" accept="image/*" capture="user">

    InformationsquelleAutor Ray Nicholus