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

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.

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 )

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. photos+abc123@yoursite.com).

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).

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

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:fotos@opina.com?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>

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

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

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:

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:

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

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.

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

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).