Um aplicativo da web html5 para safari móvel para fazer upload de imagens do Photos.app?


92

É possível escrever um aplicativo web HTML5 projetado para dispositivos iOS (iPad, iPhone, iPod Touch) que pode permitir ao usuário fazer upload de uma imagem do sistema de arquivos?

Imagine fazer upload de uma nova foto para o seu avatar do Twitter por meio de um aplicativo da web.

Respostas:


98

ATUALIZAR: iOs 6 Safari vai suportar upload de vídeos e imagens da Biblioteca de fotos.

====

Eu odeio essa palavra, mas é impossível (por enquanto). Aqui estão as razões:

1) Safari móvel não suporta upload de nada.

2) o safári móvel não pode acessar componentes ios (na verdade, pode, mas apenas por meio do fone de ouvido )


7
Você está certo, é uma palavra odiosa! Minha pesquisa mostrou a mesma coisa e eu simplesmente não poderia viver com isso, então perguntei aqui no SO. Obrigado pela resposta embora.
Abhic,

2
O que não entendo é por que a apple não permitiu que a pasta de fotos / vídeos fosse exposta ao invés de ter medo de expor todo o sistema.
fasih.rana

1
Qualquer link para a documentação do iOS Safari para consultar como conseguir uploads de imagens no iOS ?? Obrigado!
dia

Ah! Ele faz isso automaticamente. Sem aborrecimentos :)
detj

Você pode postar algum código para upload de arquivo no navegador ios safari usando HTML 5?
Karthick

28

outra maneira de abordar esse problema seria fornecer aos usuários um endereço de e-mail privado para o qual eles podem enviar suas fotos para upload automático (por exemplo, photos+abc123@yoursite.com).

Um pouco mais de trabalho para configurar, mas proporcionará uma experiência consistente para usuários em todos os dispositivos (e usuários não móveis também podem achar conveniente).


Gostaria de saber como isso pode ser feito, ou seja, o usuário envia um email com um anexo, foto ou vídeo, como posso extrair essa informação e salvá-la em um banco de dados e postar as informações relativas no lugar certo, fotos na pasta de imagens e vídeos para a pasta de vídeos ... já deve haver um script que faça isso ... ou algo semelhante ..
Tanker

@Tanker sim, seu aplicativo teria que recuperar os e-mails periodicamente, pegar os anexos e salvar as alterações. Eu usei as bibliotecas de e-mail ChilKat para isso no passado, embora deva avisar que nem sempre compila bem (para mim -ymmv) entre 32/64 bits.
brichins

9

Gosto da solução picup em http://picupapp.com


Existe um tutorial para isso . Um problema com o Picup é que ele carrega a imagem para um servidor de terceiros (imgur.com), o que pode criar muitos problemas de licenciamento / privacidade. Os termos de serviço do Imgur basicamente dizem que a imagem é deles e você não pode usá-la para fins comerciais.
Ian Dunn

2
@Ian Dunn: Picup pode ser configurado para enviar a imagem para qualquer URL que você quiser. Imgur é apenas o padrão.
geon

8

Eu encontrei uma solução aceitável para isso. Adicione um link mailTo na página com instruções predefinidas que mostram ao usuário como copiar e colar uma imagem do rolo da câmera no e-mail. Em seguida, escreva um trabalho / script que ouça essa caixa de entrada para emails de entrada, retire a imagem e processe de acordo.

Não é perfeito, mas eles clicam no link do safari e depois só precisam ir às fotos, copiar e voltar ao seu aplicativo. Depois de tentar no meu telefone, é mais do que uma solução alternativa aceitável que me permite seguir em frente sem escrever um aplicativo.

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

É mais aceitável para você porque conhece as limitações - estou curioso para ver as respostas de não desenvolvedores respondendo a um aplicativo como este. É uma maneira interessante de fazer isso e que depende de outro método com o qual os usuários já estão familiarizados - pode funcionar para algo que estou tentando fazer também.
Angelo R.

Sim. essa é uma ideia legal. Deve haver um script que irá analisar os anexos. Zend Framework tem alguns componentes interessantes para isso.
Svetoslav Marinov

6

Você poderá fazer upload de fotos usando o Safari no iOS 6 em diante. Embora as soluções alternativas acima ainda sejam necessárias para iOS 5 e versões anteriores.


2
você tem instruções sobre como fazer isso no iOS 6?
Wim Deblauwe


2

O Safari no iOS 6.0 é o primeiro a adicionar suporte <input type="file">, permitindo que você:

  • tire um novo vídeo ou foto
  • selecione um vídeo ou foto da biblioteca

Veja como fica no iOS10:

Entrada de arquivo iOS 10 sem filtro

iOS9 introduziu o iCloud Drive e mais opções, incluindo Dropbox . iOS 6 a 8 tinha apenas as primeiras duas opções.

Você pode limitar os tipos de arquivo a apenas fotos usando o accept="image/*"atributo:

<input type="file" accept="image/*" > irá limitar as opções a apenas fotos:

Entrada de arquivo iOS 10 para fotos

No lado Android, o Android 2.2+ é o primeiro a oferecer suporte ao código acima.

Aviso de isenção de responsabilidade: imagem cortesia de Pipe que lida com a gravação de vídeo onde eu sou CTO


1

Uma ideia que acabei de pensar é ter uma caixa de texto na qual o usuário possa colar um url, permitindo que ele use o dropbox ou um aplicativo semelhante e copie um url público do arquivo do dropbox. Assim, o servidor poderá fazer o download do servidor da caixa de depósito.

Eu preciso oferecer suporte a outros tipos de arquivos além de imagens, então parece que o picupapp não funcionará para mim.


0

Se você ainda estiver usando o iOS5, considere usar o iCab Mobile. Entendi para o meu ipad e (pelo menos para mim) o upload de arquivos funciona bem.

Atenciosamente, Piotr


0

Apenas para iOS> = 6

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

"capture" não muda nada com o iOS, mas ainda é útil para outros dispositivos (aparentemente Androids, veja os comentários).


capture="camera"(string) foi substituído por capture="capture"na recomendação do candidato do W3C. Em ambos os casos, ele só funciona no Android.
Octavian Naicu de

@OctavianNaicu faz sentido. Eu editei a resposta. Obrigado pela informação
Erdal G.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.