Korzystanie wejście formularz aby uzyskać dostęp do kamery i natychmiast przesyłać zdjęcia za pomocą aplikacji internetowej

Question

natknąłem this answer który jest genialny:

w iPhone iOS6 i z Androidem ICS r HTML5 ma następującą znacznik, który pozwala na wykonanie zdjęcia z urządzenia:

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

Capture może przyjmować wartości takie jak kamera, kamera i audio.

Czy można zrobić to o jeden krok dalej, używając ajaxowego rodzaju, aby natychmiast przesłać zdjęcie po jego zrobieniu?

Na przykład za pomocą mojego telefonu, po dotknięciu wejścia, otwiera się aparat, który natychmiast pozwala mi zrobić zdjęcie i zapisać je. Po zapisaniu go w kamerze jest on następnie wyświetlany jako przycisk do przesłania.

Co by było, gdyby to zdjęcie zostało natychmiast przesłane zamiast czekać, aż użytkownik kliknie przycisk Prześlij w formularzu?

Answer 1

To naprawdę proste, wystarczy wysłać plik za pomocą żądania XHR w module obsługi wejścia pliku wejściowego.

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