HTML-Dateieingabesteuerung mit Capture- und Accept-Attributen funktioniert falsch?

78

Mein Problem:

Dann klicken Benutzer auf den input type=fileBenutzer muss den upload file + cameraDialog erhalten. Ich benutze für diese HTML-Attribute acceptund capture. Bei einigen modernen Geräten ist dies jedoch nicht der Fall. Unten finden Sie die Codebeispiele und die Tabelle, welche davon funktioniert oder nicht. Codebeispiele werden in Mobile Safariund getestet Chrome.

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 only cameraaktiviert
  • 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 upload file + cameraDialoge für alle Browser verwenden

<input type="file" accept="image/*">nur. Aber capturein diesem Fall gibt es kein Attribut, und das beunruhigt mich und es gibt ein Problem mit Android 4.3.

Meine Fragen sind:

  1. Sind die Verhaltensweisen in der Tabelle wahr? Android 4.3 Verhalten ist ein Fehler?
  2. Kann ich Browsern vertrauen, dass sie immer eine Kamera zum Hochladen von Dialogen ohne Erfassungsattribut hinzufügen? (Bitte fügen Sie Proof-Links für die Antwort hinzu)

Vielen Dank.

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

android  ios  html  mobile 
— Pinal
quelle
Diese Frage bezieht sich nicht auf die API von Javascript. Es geht um Browserverhalten mit input type file. Ich möchte keine Datei lesen. Ich weiß genau, welcher Benutzer Zugriff auf Bilder / Kamera auf meiner Website gewähren soll.
— Pinal
— Ruskin
Ja. The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment using a media capture mechanism is preferred. Aber ich möchte wissen, ob mein Beispiel (eines davon) ohne funktioniert capture. Ist dieses Verhalten Stahl in der Zukunft? Gibt es Entwürfe / Dokumente dazu?
— Pinal
1
W3C Candidate Recommendationist praktisch die stabile API. Weiter ist, W3C Recommendationwas bedeutet, dass es sich nie ändern wird. ModernizrIch habe keine Erkennung für die Erfassung. Flash für Handys? Es ist nicht ernst.
— Pinal
1
@ YonnTrimoreau Ich denke, es bedeutet W -> Arbeit
— Pinal

Antworten:

34

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

Tatsächlich scheinen aktuelle Implementierungen überhaupt nicht auf dem Erfassungsattribut zu beruhen, sondern nur auf den Typ- und Akzeptanzattributen: Der Browser zeigt ein Dialogfeld an, in dem der Benutzer auswählen kann, wo die Datei aufgenommen werden soll, und das captureAttribut wird nicht berücksichtigt. Beispielsweise verwendet iOS Safari das Attribut accept (keine Erfassung) für Bilder und Videos (nicht Audio). Auch wenn Sie das acceptAttribut nicht verwenden , können Sie im Browser zwischen "Foto oder Video aufnehmen" und "Vorhanden auswählen" wählen (danke an @ firt für diesen Hinweis).

aus diesem

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

— Pinal
quelle
3
Zu Ihrer Information: Wenn Sie unter iOS das Attribut multiple = "multiple" verwenden, umgeht die mobile Safari die Auswahl und wechselt direkt zur Mehrfachauswahl.
— Tommybananas
Mobile Safari (MS) bedeutet mobiles Webkit, nicht nur Safari unter iOS.
— Pinal
Was ist mit Windows-Tablets mit Chrome? Ist es ein Betriebssystem "Feature" oder Browser?
— JCS
1
@Pinal, heute auf einem Windows-Tablet mit Chrome ausprobiert und weiterhin in die Galerie verschoben, anstatt die beiden Optionen anzuzeigen: Fotografieren oder Bild der Galerie verwenden.
— JCS
6
@Pinal diese Antwort ist nicht mehr korrekt. iOS 10.3.1 wurde geändert, um der Spezifikation zu entsprechen. Wenn Sie jetzt die Erfassung verwenden, wird die Auswahl umgangen, Bilder aus der Fotobibliothek auszuwählen. Siehe zum Beispiel stackoverflow.com/questions/43396109/…
— David
28

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 Ihrer Geräte ordnungsgemäß. Der obige Code ist korrekt , vollständig und reicht aus , um sowohl iOS als auch Android Folgendes mitzuteilen:

  1. Sie möchten ein Bild aufnehmen ( accept="video/*"für Video und accept="audio/*"Audio verwenden, ganz überspringen, um etwas zuzulassen).
  2. Der Benutzer sollte in der Lage sein , ein vorhandenes auszuwählen ODER es vor Ort zu erfassen
  1. Kann ich Browsern vertrauen, dass sie immer eine Kamera zum Hochladen von Dialogen ohne Erfassungsattribut hinzufügen?

Ja.

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

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

capturewird von Android 3.0+ unterstützt, mit dem Sie direkt zur Kamera-App gelangen, wenn captureder Code vorhanden ist.

In iOS6-10 gibt es keine Unterstützung, die Ihnen immer mindestens zwei Optionen bietet: "Foto aufnehmen" + "Fotobibliothek".

Das captureAttribut wurde in der Spezifikation weiterentwickelt (weshalb in StackOverflow mehrere Versionen angezeigt werden):

  1. Juli 2010: accept="image/*;capture=camera"
  2. Apr 2011: capture="camera"(String)
  3. Dezember 2012: capture(Boolean, W3C-Kandidatenempfehlung ,)

PS: Ich habe eine Menge Nachforschungen über HTML Media Capture angestellt, siehe Korrekte Syntax für HTML Media Capture und Die neue Eingabeaufforderung für Media Capture in iOS9 . Hier ist mein Prüfstand mit mehr als 20 Codekombinationen.

— Octavian Naicu
quelle
Falsche Antwort. Ich wollte kein Bild aufnehmen. Ich wollte dem Benutzer Kamerazugriff und Datei-Upload-Zugriff gewähren. Und die richtige Antwort lautet "Capture-Attribut macht dafür überhaupt keinen Sinn".
— Pinal
1
Der angegebene Code bietet Ihnen sowohl Kamerazugriff als auch Datei-Upload-Zugriff für Benutzer. Verwenden captureSie diese Option, wenn Sie nur auf die Kamera zugreifen möchten (funktioniert derzeit nur unter Android).
— Octavian Naicu
Ich habe meine Antwort aktualisiert, um die Audio- , Video- und alles Optionen accept="image/*"
— einzuschließen
HINWEIS:
— Aktivieren Sie die Browserberechtigungen
6

Für andere ist dies das Verhalten auf Chrome unter Android 9 ab heute (Februar 2020):

  Must be selected from album
  <input type="file" accept="image/*">

  Must be captured from camera
  <input type="file" accept="image/*" capture="">

  Allowed user to choose either from album or camera
  <input type="file" accept="image/*;capture=camera">
— Beeno Tung
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.