Aplikacja internetowa html5 do mobilnego safari do przesyłania zdjęć z aplikacji Photos.app?

93

Czy można napisać aplikację internetową HTML5 przeznaczoną na urządzenia z systemem iOS (iPad, iPhone, iPod Touch), która umożliwi użytkownikowi przesyłanie obrazu z systemu plików?

Wyobraź sobie, że przesyłasz nowe zdjęcie do swojego awatara na Twitterze za pośrednictwem aplikacji internetowej.

Abhic
źródło

Odpowiedzi:

98

AKTUALIZACJA: iOs 6 Safari będzie obsługiwać przesyłanie filmów i obrazów z biblioteki zdjęć.

====

Nienawidzę tego słowa, ale jest to niemożliwe (teraz). Oto powody:

1) mobilne safari nie obsługuje przesyłania niczego.

2) mobilne safari nie ma dostępu do komponentów ios (w rzeczywistości może, ale tylko przez phonegap )

Alexandre
źródło
7
Masz rację, to nienawistne słowo! Moje badania wykazały to samo i po prostu nie mogłem z tym żyć, więc zapytano mnie tutaj na SO. Ale dzięki za odpowiedź.
Abhic
2
Nie rozumiem, dlaczego Apple nie pozwolił na odsłonięcie folderu ze zdjęciami / filmami, zamiast bać się ujawnienia całego systemu.
fasih.rana
1
Dowolny link do dokumentacji Safari na iOS, aby dowiedzieć się, jak przesłać obrazy w iOS? Dzięki!
detj
Ach! Robi to automatycznie. Bez kłopotów :)
detj
Czy możesz opublikować kod do przesłania pliku w przeglądarce Safari na iOS przy użyciu HTML 5?
Karthick
28

Innym sposobem rozwiązania tego problemu byłoby udostępnienie użytkownikom prywatnego adresu e-mail, na który mogą wysłać swoje zdjęcia w celu automatycznego przesłania (np. [email protected]).

Trochę więcej pracy przy konfiguracji, ale zapewni spójne wrażenia użytkownikom na wszystkich urządzeniach (a dla użytkowników innych niż mobilne może to być wygodne).

Josh
źródło
Zastanawiam się, jak można to zrobić, mam na myśli, użytkownik wysyła e-mail z załącznikiem, zdjęciem lub filmem, jak mogę wyodrębnić te informacje i zapisać je w bazie danych i opublikować względne informacje w odpowiednim miejscu, zdjęcia do folderu obrazów i filmy do folderu z filmami ... musi już istnieć skrypt, który może to zrobić ... lub coś podobnego ...
Tanker
@ Tanker tak, Twoja aplikacja musiałaby okresowo pobierać wiadomości e-mail, pobierać załączniki i zapisywać zmiany. W przeszłości korzystałem z bibliotek poczty elektronicznej ChilKat , chociaż ostrzegam, że nie zawsze ładnie kompiluje się (dla mnie -ymmv) między 32/64 bitami.
brichins
9

Podoba mi się rozwiązanie picup na http://picupapp.com

Joa
źródło
Jest do tego samouczek . Jednym z problemów z Picup jest to, że przesyła obraz na serwer innej firmy (imgur.com), co może powodować wiele problemów z licencjami / prywatnością. Warunki korzystania z usługi Imgur zasadniczo mówią, że są właścicielami obrazu i nie można go używać do celów komercyjnych.
Ian Dunn
2
@Ian Dunn: Picup można skonfigurować tak, aby przesyłał obraz pod dowolny adres URL. Imgur jest po prostu domyślnym.
Geon
8

Znalazłem akceptowalną obejście tego problemu. Dodaj link mailTo na stronie z predefiniowanymi instrukcjami, które pokazują użytkownikowi, jak skopiować obraz z rolki aparatu do wiadomości e-mail. Następnie napisz zadanie / skrypt, który nasłuchuje tej skrzynki odbiorczej pod kątem przychodzących wiadomości e-mail, usuń obraz i odpowiednio przetwórz.

To nie jest idealne, ale klikają link z safari, a następnie muszą tylko przejść do zdjęć, skopiować i wrócić do Twojej aplikacji. Po wypróbowaniu go na telefonie jest to więcej niż akceptowalna praca, która pozwala mi przejść do przodu bez pisania aplikacji.

    <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
źródło
Jest to dla ciebie bardziej akceptowalne, ponieważ znasz ograniczenia - jestem ciekawy, jak odpowiedzi osób, które nie są programistami, reagują na taką aplikację. Jest to interesujący sposób na zrobienie tego, który opiera się na innej metodzie, którą użytkownicy już znają - może to zadziałać w przypadku czegoś, co próbuję zrobić.
Angelo R.
Tak. to fajny pomysł. Musi istnieć skrypt, który przeanalizuje załączniki. Zend Framework ma do tego kilka fajnych komponentów.
Svetoslav Marinov
6

Będziesz mógł przesyłać zdjęcia za pomocą safari w iOS 6 i nowszych. Chociaż powyższe obejścia będą nadal konieczne w przypadku iOS 5 i starszych.

Mediolan
źródło
2
czy masz jakieś instrukcje, jak to zrobić na iOS 6?
Wim Deblauwe
2

Inną natywną aplikacją na iOS (podobną do Picup lub iPhone-Photo-Picker) jest Aurigma Up .

Ian Dunn
źródło
2

Safari na iOS 6.0 jest pierwszą, która dodaje obsługę <input type="file">, umożliwiając:

  • zrób nowy film lub zdjęcie
  • wybierz film lub zdjęcie z biblioteki

Oto jak to wygląda na iOS10:

Pliki wejściowe iOS 10 bez filtra

iOS9 wprowadził iCloud Drive i więcej opcji, w tym Dropbox . iOS 6 do 8 miał tylko pierwsze dwie opcje.

Możesz ograniczyć typy plików do samych zdjęć, używając accept="image/*"atrybutu:

<input type="file" accept="image/*" > ograniczy opcje tylko do zdjęć:

Wejście plików iOS 10 dla zdjęć

Po stronie Androida Android 2.2+ jest pierwszym, który obsługuje powyższy kod.

Zastrzeżenie: zdjęcie dzięki uprzejmości Pipe, która zajmuje się nagrywaniem wideo, gdzie jestem CTO

Octavian Naicu
źródło
1

Pomysł, o którym właśnie pomyślałem, to mieć pole tekstowe, do którego użytkownik mógłby wkleić adres URL, umożliwiając mu korzystanie ze skrzynki lub podobnej aplikacji i kopiowanie publicznego adresu URL pliku skrzynki. Wtedy serwer będzie mógł pobierać pliki z serwera skrzynki domyślnej.

Muszę obsługiwać typy plików inne niż obrazy, więc wygląda na to, że picupapp nie będzie działać dla mnie.

Tymina
źródło
0

Jeśli nadal używasz iOS5, rozważ użycie iCab Mobile. Mam to na iPada i (przynajmniej dla mnie) przesyłanie plików działa dobrze.

Pozdrawiam, Piotr

Piotr Justyna
źródło
0

Tylko dla iOS> = 6

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

„Przechwytywanie” niczego nie zmienia w iOS, ale nadal jest przydatne na innych urządzeniach (najwyraźniej Androidach, zobacz komentarze).

Erdal G.
źródło
capture="camera"(ciąg znaków) został zastąpiony capture="capture"w Rekomendacji kandydata W3C. W obu przypadkach działa tylko na Androidzie.
Octavian Naicu
@OctavianNaicu ma sens. Zredagowałem odpowiedź. Dzięki za informację
Erdal G.