Korzystanie z formularza wejściowego, aby uzyskać dostęp do kamery i natychmiast przesłać zdjęcia za pomocą aplikacji internetowej

Question

Korzystanie z formularza wejściowego, aby uzyskać dostęp do kamery i natychmiast przesłać zdjęcia za pomocą aplikacji internetowej

Natknąłem się na tę odpowiedź która jest genialna:

W iPhone iOS6 i począwszy od Androida ICS, HTML5 ma następujące tag pozwalający na robienie zdjęć z urządzenia:
    <input type="file" accept="image/*" capture="camera">
Przechwytywanie może przyjmować wartości takie jak kamera, kamera i dźwięk.

Czy jest możliwe, aby pójść o krok dalej, używając ajax jakiegoś rodzaju, aby natychmiast przesłać zdjęcie po jego zrobieniu?

Na przykład, używając telefonu, po dotknięciu wejścia, to otwiera aparat, który natychmiast pozwoli mi zrobić zdjęcie i zapisać je. Kiedy zapisuję go w aparacie, jest on wyświetlany za pomocą przycisku wprowadzania jako plik do przesłania.

Co trzeba zrobić, aby to zdjęcie zostało natychmiast przesłane, zamiast czekać, aż użytkownik kliknie przycisk Wyślij formularza?

64

javascript web-applications mobile forms html5

Author: Community, 2013-06-21

Source

1 answers

score 80 · Accepted Answer

Jest to bardzo proste, wystarczy wysłać plik poprzez żądanie XHR wewnątrz modułu obsługi onchange wejścia pliku.

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