it-swarm.com.de

HTML-Datei-Eingabesteuerung mit Capture- und Accept-Attributen funktioniert falsch?

Mein Problem:

Dann muss der Benutzer, der auf input type=file Klickt, das Dialogfeld upload file + camera Aufrufen. Ich benutze für diese HTML-Attribute accept und capture. Bei einigen modernen Geräten ist dies jedoch nicht der Fall. Unten sehen Sie die Codebeispiele und die Tabelle, welche davon funktioniert oder nicht. Codebeispiele werden in Mobile Safari Und Chrome getestet.

TL; DR:

Ich habe 5 Codebeispiele mit nur input type file:

1. ( jsfiddle )

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

2. ( jsfiddle )

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

3. ( jsfiddle )

<input type="file" capture="camera">

4. ( jsfiddle )

<input type="file" capture>

5. ( jsfiddle )

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

Testgeräte:

  • Samsung S3 (Android 4.1.2)
  • Samsung S3 (Android 4.3)
  • Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
  • Samsung Note (Android 4.1.2)
  • iPhone 5 (iOS 7.0.4)
  • Nexus 4 (Android 4.4)

Ergebnistabelle:

  • W (ork) - bedeutet aktiviert upload image dialog with camera
  • P (künstlich funktioniert) - bedeutet aktiviert upload dialog(not image only) with camera
  • N (keine Arbeit) - bedeutet, dass only camera Aktiviert ist
  • Ch - bedeutet Chrome
  • MS - bedeutet Mobile Safari

#

--------------------------------------------------------------------------------
|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| 
--------------------------------------------------------------------------------
|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |
--------------------------------------------------------------------------------
|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

Wie Sie sehen, kann ich nur das Dialogfeld upload file + camera Für alle verwendeten Browser anzeigen

Nur <input type="file" accept="image/*">. In diesem Fall gibt es jedoch kein capture -Attribut, was mich beunruhigt und ein Problem mit Android 4.3.

Meine Fragen sind:

  1. Sind Verhaltensweisen in der Tabelle wahr? Android 4.3 Verhalten ist ein Fehler?
  2. Kann ich Browsern vertrauen, dass sie dem Upload-Dialog immer eine Kamera hinzufügen, ohne ein Erfassungsattribut zu haben? (Bitte fügen Sie Beweise für die Antwort hinzu)

Vielen Dank.

P.S. Die Frage ist etwas Besonderes, aber auf meiner Website muss ich den Benutzern Zugriff auf die Bilder und die Kamera gewähren. Ich denke auch, dass mein Tisch für jeden hilfreich sein kann und ich werde auch nach einer Antwort suchen und meine Antwort hier posten, wenn niemand antwortet.

65
Pinal

Dies ist die eigentliche Antwort. Poste es einfach hier für die nächsten Benutzer:

Tatsächlich scheint es, dass aktuelle Implementierungen überhaupt nicht auf dem Erfassungsattribut beruhen, sondern nur auf dem Typ und den Akzeptanzattributen: Der Browser zeigt ein Dialogfeld an, in dem der Benutzer auswählen kann, wo die Datei abgelegt werden soll, und das capture Attribut wird nicht berücksichtigt. IOS Safari basiert beispielsweise auf dem Accept-Attribut (kein Capture) für Bilder und Videos (kein Audio). Auch wenn Sie das Attribut accept nicht verwenden, können Sie im Browser zwischen "Foto oder Video aufnehmen" und "Vorhandene auswählen" wählen (danke an @ firt für den Hinweis).

Von dies

EDITED 17 Feb 2016: Dieses Verhalten ist auf Geräten weiterhin aktiv.

34
Pinal

Der "richtige" Code und der, den Sie verwenden sollten, ist der fünfte:

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

Aus diesem Grund funktioniert es auf den meisten Geräten ordnungsgemäß. Der obige Code ist richtig, vollständig und genug, um sowohl iOS als auch Android = das:

  1. sie möchten ein Bild aufnehmen (verwenden Sie accept="video/*" für Video und accept="audio/*" für Audio überspringen, um alles zuzulassen).
  2. der Benutzer sollte in der Lage sein, ein vorhandenes auszuwählen OR , um es zu erfassen die Stelle
  1. Kann ich Browsern vertrauen, dass sie dem Upload-Dialog immer eine Kamera hinzufügen, ohne ein Erfassungsattribut zu haben?

Ja.

Das Attribut capture wird NICHT verwendet, um die Kameraoption in den Dialog aufzunehmen (<input type="file"> reicht dafür) aber um anzuzeigen, dass die direkte Erfassung von der Webcam bevorzugt ist. Von der W3C-Empfehlungsspezifikation :

Das Erfassungsattribut ist ein boolesches Attribut, das, falls angegeben, angibt, dass die Erfassung von Medien direkt vom Gerät bevorzugt wird.

capture wird von Android 3.0+) unterstützt, wodurch Sie direkt zur Kamera-App gelangen, wenn capture im Code vorhanden ist.

Es gibt keine Unterstützung in iOS6-10, die Ihnen immer mindestens 2 Optionen bietet: "Foto aufnehmen" + "Fotobibliothek".

Das capture -Attribut wurde in der Spezifikation weiterentwickelt (aus diesem Grund werden in StackOverflow mehrere Versionen angezeigt):

  1. Juli 2010: accept="image/*;capture=camera"
  2. April 2011: capture="camera" (String)
  3. Dez 2012: capture (Boolean, Empfehlung für W3C-Kandidaten ,)

PS: Ich habe viel über HTML Media Capture recherchiert, siehe Richtige Syntax für HTML Media Capture und Die neue Eingabeaufforderung für Media Capture in iOS9 . Hier ist mein Prüfstand mit 20 + Code-Kombinationen.

21
Octavian Naicu