Eine HTML5-Web-App für die mobile Safari zum Hochladen von Bildern aus der Photos.app?

92

Ist es möglich, eine HTML5-Webanwendung für iOS-Geräte (iPad, iPhone, iPod Touch) zu schreiben, mit der der Benutzer ein Bild aus dem Dateisystem hochladen kann?

Stellen Sie sich vor, Sie laden ein neues Foto über eine Web-App auf Ihren Twitter-Avatar hoch.

Abhic
quelle

Antworten:

98

UPDATE: iOs 6 Safari unterstützt das Hochladen von Videos und Bildern aus der Fotobibliothek.

====

Ich hasse dieses Wort, aber es ist unmöglich (bis jetzt). Hier sind die Gründe:

1) Mobile Safari unterstützt das Hochladen von Daten nicht.

2) Mobile Safari kann nicht auf iOS-Komponenten zugreifen (tatsächlich, aber nur über Phonegap )

Alexandre
quelle
7
Du hast recht, es ist ein hasserfülltes Wort! Meine Nachforschungen hatten das Gleiche gezeigt und ich konnte einfach nicht damit leben, also hier auf SO gefragt. Danke für die Antwort.
Abhic
2
Was ich nicht verstehe, ist, warum Apple nicht zugelassen hat, dass der Bilder- / Videoordner angezeigt wird, anstatt Angst davor zu haben, das gesamte System freizulegen.
fasih.rana
1
Gibt es einen Link zur Dokumentation von iOS Safari, um zu erfahren, wie Sie in iOS Bilder hochladen können? Vielen Dank!
Detj
Ah! Es macht es automatisch. Keine Probleme :)
Detj
Können Sie bitte einen Code für das Hochladen von Dateien im iOS Safari Browser mit HTML 5 veröffentlichen?
Karthick
28

Eine andere Möglichkeit, dieses Problem anzugehen, besteht darin, den Benutzern eine private E-Mail-Adresse zu geben, an die sie ihre Fotos zum automatischen Hochladen per E-Mail senden können (z. B. [email protected]).

Ein wenig mehr Arbeit zum Einrichten, bietet jedoch eine konsistente Benutzererfahrung für Benutzer auf allen Geräten (und nicht mobile Benutzer finden dies möglicherweise auch praktisch).

Josh
quelle
Ich frage mich, wie das gemacht werden kann, ich meine, Benutzer senden eine E-Mail mit einem Anhang, Foto oder Video, wie kann ich diese Informationen extrahieren und in einer Datenbank speichern und die relativen Informationen an der richtigen Stelle veröffentlichen, Fotos in Bilderordner und Videos zu Videos Ordner ... es muss bereits ein Skript geben, das das kann ... oder ähnliches ..
Tanker
@Tanker Ja, Ihre App müsste die E-Mails regelmäßig abrufen, die Anhänge abrufen und Änderungen speichern. Ich habe in der Vergangenheit die ChilKat- E-Mail-Bibliotheken dafür verwendet, obwohl ich Sie warnen werde, dass sie zwischen 32/64 Bit nicht immer gut kompiliert werden (für mich -ymmv).
Brichins
9

Ich mag die Picup-Lösung unter http://picupapp.com

Joa
quelle
Dafür gibt es ein Tutorial . Ein Problem mit Picup besteht darin, dass das Bild auf einen Server eines Drittanbieters (imgur.com) hochgeladen wird, was zu vielen Lizenz- / Datenschutzproblemen führen kann. Imgurs Nutzungsbedingungen besagen im Grunde, dass sie das Bild besitzen und Sie es nicht für kommerzielle Zwecke verwenden können.
Ian Dunn
2
@ Ian Dunn: Picup kann so konfiguriert werden, dass das Bild auf eine beliebige URL hochgeladen wird. Imgur ist nur die Standardeinstellung.
Geon
8

Ich habe dafür eine akzeptable Lösung gefunden. Fügen Sie auf der Seite einen mailTo-Link mit vordefinierten Anweisungen hinzu, der dem Benutzer zeigt, wie er ein Bild von seiner Kamerarolle kopiert und in die E-Mail einfügt. Schreiben Sie dann einen Job / ein Skript, das bzw. das diesen Posteingang auf eingehende E-Mails abhört, entfernen Sie das Bild und verarbeiten Sie es entsprechend.

Es ist nicht perfekt, aber sie klicken auf den Link von Safari und müssen dann nur noch zu Fotos gehen, kopieren und zu Ihrer App zurückkehren. Nachdem ich es auf meinem Handy ausprobiert habe, ist es mehr als eine akzeptable Lösung, die es mir ermöglicht, vorwärts zu kommen, ohne eine App zu schreiben.

    <div data-role="collapsible" data-collapsed="true" id="uploadPicContainer" data-theme="d">
    <h3>{l t='Upload Picture'}</h3>
    <a href="mailto:[email protected]?subject={l t='My pictures of'} {$var_biz.bizname}[{$var_biz.id}]!&body={l t='To upload a picture go to your Camera Roll and copy paste an image to this area in the email.  We will apply your picture after review!'}">{l t='Click here to upload pictures of'} {$var_biz.bizname}</a>
</div>
EnriqueL
quelle
Es ist für Sie akzeptabler, weil Sie die Einschränkungen kennen. Ich bin gespannt auf die Antworten von Nicht-Entwicklern, die auf eine solche App reagieren. Es ist ein interessanter Weg, der sich auf eine andere Methode stützt, mit der Benutzer bereits vertraut sind - es könnte auch für etwas funktionieren, das ich versuche zu tun.
Angelo R.
Ja. Das ist eine nette Idee. Es muss ein Skript geben, das die Anhänge analysiert. Zend Framework hat dafür einige nette Komponenten.
Svetoslav Marinov
6

Sie können Fotos mit Safari ab iOS 6 hochladen. Obwohl die oben genannten Problemumgehungen für iOS 5 und niedriger weiterhin erforderlich sind.

Mailand
quelle
2
Haben Sie Anweisungen dazu unter iOS 6?
Wim Deblauwe
2

Eine andere native iOS-Anwendung (ähnlich wie Picup oder iPhone-Photo-Picker) ist Aurigma Up .

Ian Dunn
quelle
2

Safari unter iOS 6.0 ist die erste, für die Unterstützung hinzugefügt wird, <input type="file">indem Sie Folgendes ermöglichen:

  • Nimm ein neues Video oder Foto auf
  • Wählen Sie ein Video oder Foto aus der Bibliothek

So sieht es unter iOS10 aus:

iOS 10 Dateieingabe kein Filter

iOS9 führte iCloud Drive und weitere Optionen ein, einschließlich Dropbox . iOS 6 bis 8 hatten nur die ersten beiden Optionen.

Sie können die Dateitypen mithilfe des accept="image/*"Attributs auf Fotos beschränken :

<input type="file" accept="image/*" > beschränkt die Optionen nur auf Fotos:

iOS 10-Dateieingabe für Fotos

Auf der Android-Seite ist Android 2.2+ das erste, das den obigen Code unterstützt.

Haftungsausschluss: Mit freundlicher Genehmigung von Pipe, das die Videoaufzeichnung übernimmt, wenn ich CTO bin

Octavian Naicu
quelle
1

Eine Idee, an die ich gerade gedacht habe, ist ein Textfeld, in das der Benutzer eine URL einfügen kann, sodass der Benutzer Dropbox oder eine ähnliche App verwenden und eine öffentliche URL der Dropbox-Datei kopieren kann. Dann kann der Server vom Dropbox-Server herunterladen.

Ich muss andere Dateitypen als Bilder unterstützen, damit Picupapp für mich nicht funktioniert.

Thymin
quelle
0

Wenn Sie immer noch iOS5 verwenden, sollten Sie iCab Mobile verwenden. Habe es für mein iPad und (zumindest für mich) das Hochladen von Dateien funktioniert einwandfrei.

Grüße, Piotr

Piotr Justyna
quelle
0

Nur für iOS> = 6

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

"Capture" ändert nichts an iOS, ist aber dennoch nützlich für andere Geräte (anscheinend Androids, siehe Kommentare).

Erdal G.
quelle
capture="camera"(Zeichenfolge) wurde capture="capture"in der W3C-Kandidatenempfehlung durch ersetzt. In beiden Fällen funktioniert es nur unter Android.
Octavian Naicu
@ OctavianNaicu macht Sinn. Ich habe die Antwort bearbeitet. Danke für die Info
Erdal G.