Веб-приложение html5 для мобильного сафари для загрузки изображений из Photos.app?


93

Можно ли написать веб-приложение HTML5, предназначенное для устройств iOS (iPad, iPhone, iPod Touch), которое позволит пользователю загружать изображение из файловой системы?

Представьте, что вы загружаете новую фотографию на свой аватар в Twitter через веб-приложение.

Ответы:


98

ОБНОВЛЕНИЕ: iOs 6 Safari будет поддерживать загрузку видео и изображений из библиотеки фотографий.

====

Я ненавижу это слово, но это невозможно (сейчас). Вот причины:

1) мобильное сафари ничего не поддерживает.

2) мобильное сафари не может получить доступ к компонентам ios (на самом деле может, но только через телефонную связь )


7
Вы правы, это ненавистное слово! Мое исследование показало то же самое, и я просто не мог с этим жить, поэтому спросил здесь, на SO. Спасибо за ответ.
Abhic

2
Чего я не понимаю, так это того, почему Apple не разрешила открывать папку с изображениями / видео, вместо того, чтобы бояться раскрыть всю систему.
fasih.rana

1
Любая ссылка на документацию iOS Safari, чтобы указать, как добиться загрузки изображений в iOS ?? Благодарность!
detj 03

Ах! Делает это автоматически. Никаких проблем :)
detj 03

Не могли бы вы опубликовать код для загрузки файлов в браузере ios safari с использованием HTML 5?
Karthick

28

Другой способ решить эту проблему - предоставить пользователям личный адрес электронной почты, на который они могут отправлять свои фотографии для автоматической загрузки (например, photos+abc123@yoursite.com).

Немного больше работы по настройке, но это даст единообразный опыт для пользователей на всех устройствах (и немобильным пользователям это тоже может быть удобно).


Интересно, как это можно сделать, я имею в виду, пользователь отправляет электронное письмо с вложением, фотографией или видео, как я могу извлечь эту информацию и сохранить ее в БД и опубликовать относительную информацию в нужном месте, фотографии в папку изображений и видео в папку с видео ... уже должен быть скрипт, который может это сделать ... или что-то подобное ..
Tanker

@Tanker: да, вашему приложению придется периодически получать электронные письма, захватывать вложения и сохранять изменения. В прошлом я использовал для этого почтовые библиотеки ChilKat , хотя предупреждаю вас, что он не всегда хорошо компилируется (для меня -ymmv) между 32/64 битами.
brichins

9

Мне нравится решение picup на http://picupapp.com


Для этого есть учебник . Одна из проблем с Picup заключается в том, что он загружает изображение на сторонний сервер (imgur.com), что может создать множество проблем с лицензированием / конфиденциальностью. Условия обслуживания Imgur в основном говорят, что изображение принадлежит им, и вы не можете использовать его в коммерческих целях.
Ян Данн,

2
@Ian Dunn: Picup можно настроить для загрузки изображения по любому URL-адресу. Imgur просто по умолчанию.
geon

8

Я нашел для этого приемлемую работу. Добавьте ссылку mailTo на страницу с предопределенными инструкциями, которые показывают пользователю, как скопировать и вставить изображение из его камеры в электронное письмо. Затем напишите задание / сценарий, который прослушивает этот почтовый ящик для входящих писем, разделите изображение и обработайте его соответствующим образом.

Это не идеально, но они нажимают ссылку из сафари, а затем нужно только перейти к фотографиям, скопировать и вернуться в ваше приложение. Попробовав его на своем телефоне, я понял, что это более чем приемлемая работа, позволяющая мне двигаться вперед без написания приложения.

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

Это более приемлемо для вас, потому что вы знаете об ограничениях - мне любопытно увидеть ответы не разработчиков, которые отвечают на подобное приложение. Это интересный способ, основанный на другом методе, с которым пользователи уже знакомы - он может сработать и для того, что я пытаюсь сделать.
Анджело Р.

Ага. это отличная идея. Должен быть скрипт, который будет разбирать вложения. Zend Framework имеет для этого несколько хороших компонентов.
Святослав Маринов

6

Вы сможете загружать фотографии с помощью сафари в iOS 6 и новее. Хотя вышеупомянутые обходные пути все равно будут необходимы для iOS 5 и ниже.


2
у вас есть инструкции, как это сделать на iOS 6?
Wim Deblauwe


2

Safari на iOS 6.0 является первым, для которого добавлена ​​поддержка <input type="file">, позволяя:

  • сделай новое видео или фото
  • выберите видео или фото из библиотеки

Вот как это выглядит на iOS10:

Ввод файла iOS 10 без фильтра

iOS9 представила iCloud Drive и другие опции, включая Dropbox . В iOS с 6 по 8 были только первые два варианта.

Вы можете ограничить типы файлов только фотографиями с помощью accept="image/*"атрибута:

<input type="file" accept="image/*" > ограничит варианты только фотографиями:

iOS 10 файловый ввод для фотографий

На стороне Android Android 2.2+ является первым, поддерживающим вышеуказанный код.

Отказ от ответственности: изображение любезно предоставлено Pipe, которая занимается записью видео, где я являюсь техническим директором


1

Идея, о которой я только что подумал, состоит в том, чтобы иметь текстовое поле, в которое пользователь мог бы вставить URL-адрес, позволяющий пользователю использовать Dropbox или подобное приложение и копировать общедоступный URL-адрес файла dropbox. Тогда сервер сможет скачивать с сервера Dropbox.

Мне нужно поддерживать типы файлов, отличные от изображений, поэтому мне кажется, что picupapp не работает.


0

Если вы все еще используете iOS5, рассмотрите возможность использования iCab Mobile. Получил для моего ipad и (по крайней мере, для меня) загрузка файлов работает нормально.

С уважением, Петр


0

Только для iOS> = 6

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

«захват» ничего не меняет в iOS, но он по-прежнему полезен для других устройств (очевидно, Android, см. комментарии).


capture="camera"(строка) была заменена на capture="capture"в рекомендации кандидата W3C. В обоих случаях он работает только на Android.
Octavian Naicu

@OctavianNaicu имеет смысл. Я отредактировал ответ. Спасибо за информацию
Эрдал Г.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.