Verwenden der Formulareingabe, um auf die Kamera zuzugreifen und Fotos sofort über die Web-App hochzuladen

88

Ich bin auf diese brillante Antwort gestoßen:

In iPhone iOS6 und ab Android ICS verfügt HTML5 über das folgende Tag, mit dem Sie Bilder von Ihrem Gerät aufnehmen können:

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

Die Aufnahme kann Werte wie Kamera, Camcorder und Audio annehmen.

Ist es möglich, noch einen Schritt weiter zu gehen, indem Sie Ajax verwenden, um Fotos sofort nach der Aufnahme hochzuladen?

Wenn ich beispielsweise mit meinem Telefon auf den Eingang tippe, wird die Kamera geöffnet, sodass ich sofort ein Foto aufnehmen und speichern kann. Wenn ich es in der Kamera speichere, wird es über die Eingabetaste als hochzuladende Datei aufgelistet.

Was würde es brauchen, um dieses Foto sofort hochzuladen, anstatt darauf zu warten, dass der Benutzer auf die Schaltfläche Senden des Formulars klickt?

micah
quelle
1
Was hast du schon versucht? Was hast du verblüfft?
Marcin
Wenn Sie an Steuerelementen von Drittanbietern interessiert sind, können Sie Kendo UI demos.kendoui.com/web/upload/api.html
HaBo
1
@Marcin Ich war noch nie stark mit Javascript, also war ich mir nicht sicher, was ich überhaupt versuchen sollte. Was ich zu replizieren versuche, ist eine native App-Funktion, bei der das Foto sofort ohne zusätzlichen Schritt auf den Dienst oder den Remote-Server hochgeladen wird, nachdem das Foto mit der Kamera aufgenommen wurde.
Micah

Antworten:

103

Dies ist ganz einfach. Senden Sie die Datei einfach über eine XHR-Anforderung im Onchange-Handler der Dateieingabe.

<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
quelle
1
Vielen Dank für diese Antwort. Dieser Ereignis-Listener überwacht also zur Änderung die Eingabe # myFileInput und weiß, wann ein Foto zum Hochladen in die Warteschlange gestellt wird? Und dann wird wohl die sendPic-Funktion ausgeführt, wobei das FormData-Objekt das Foto automatisch hochlädt? Ich verstehe, was XHR auf einem sehr hohen Niveau ist. Habe ich das richtig verstanden?
Micah
Der Ereignis-Listener wird aufgerufen, nachdem der Benutzer eine Datei ausgewählt hat.
Ray Nicholus
Der Ereignis-Listener fordert Sie also sendPic()auf, die Datei sofort hochzuladen, nachdem die Kamera das Foto aufgenommen hat.
Micah
1
Können Sie mir die richtige Richtung weisen, um herauszufinden, wie ich ein Formular über XHR senden kann?
Iluvpinkerton
3
@iluvpinkerton Sicher, benutze (oder schau dir das an) Fine Uploader oder Ajax-Form . Haftungsausschluss - Ich bin der Entwickler beider Bibliotheken.
Ray Nicholus