Korzystanie z formularza w celu uzyskania dostępu do aparatu i natychmiastowego przesyłania zdjęć za pomocą aplikacji internetowej

88

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

W iPhone iOS6 i Android ICS i nowszych, HTML5 ma następujący tag, który umożliwia robienie zdjęć z twojego urządzenia:

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

Przechwytywanie może przyjmować wartości, takie jak aparat, kamera i dźwięk.

Czy można pójść o krok dalej, używając jakiegoś rodzaju Ajax do natychmiastowego przesłania zdjęcia po jego zrobieniu?

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

Co wymagałoby natychmiastowego przesłania tego zdjęcia zamiast czekania, aż użytkownik kliknie przycisk Prześlij w formularzu?

micah
źródło
1
Czego już próbowałeś? O co ci chodziło?
Marcin
Jeśli jesteś zainteresowany kontrolkami innych firm, możesz rozważyć demos
HaBo
1
@Marcin Nigdy nie byłem mocny w javascript, więc nie byłem pewien, czego spróbować. To, co próbuję odtworzyć, to natywna funkcja aplikacji, w której zdjęcie jest natychmiast przesyłane do serwisu lub zdalnego serwera bez dodatkowego kroku po zrobieniu zdjęcia aparatem.
micah

Odpowiedzi:

103

Jest to naprawdę łatwe, po prostu wyślij plik za pośrednictwem żądania XHR wewnątrz modułu obsługi zmiany 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);
Ray Nicholus
źródło
1
Dziękuję za tę odpowiedź. Więc ten detektor zdarzeń obserwuje wejście # myFileInput dla zmiany, wiedząc, kiedy zdjęcie jest w kolejce do przesłania? A potem przypuszczam, że wykona funkcję sendPic z objct FormData automatycznie przesyłając zdjęcie? Rozumiem, czym XHR jest na bardzo wysokim poziomie. Czy dobrze to zrozumiałem?
micah
Detektor zdarzeń jest wywoływany po wybraniu pliku przez użytkownika.
Ray Nicholus
Czyli detektor zdarzenia monituje sendPic()o natychmiastowe przesłanie pliku po wykonaniu zdjęcia przez aparat?
micah
1
Czy możesz wskazać mi właściwy kierunek, aby dowiedzieć się, jak wysłać formularz przez XHR?
iluvpinkerton
3
@iluvpinkerton Jasne, użyj (lub przyjrzyj się) Fine Uploader lub ajax-form . Zastrzeżenie - jestem twórcą obu bibliotek.
Ray Nicholus