Photos.app에서 이미지를 업로드하는 모바일 사파리 용 html5 웹 앱?


93

사용자가 파일 시스템에서 이미지를 업로드 할 수있는 iOS 장치 (iPad, iPhone, iPod Touch) 용으로 설계된 HTML5 웹 애플리케이션을 작성할 수 있습니까?

웹 앱을 통해 트위터 아바타에 새 사진을 업로드한다고 상상해보십시오.

답변:


98

업데이트 : iOs 6 Safari는 사진 라이브러리에서 비디오 및 이미지 업로드를 지원합니다.

====

이 단어가 싫지만 불가능합니다 (지금까지). 이유는 다음과 같습니다.

1) 모바일 사파리는 업로드를 지원하지 않습니다.

2) 모바일 사파리는 iOS 구성 요소에 액세스 할 수 없습니다 (실제로는 가능하지만 phonegap통해서만 가능 ).


7
당신 말이 맞아요. 내 연구는 똑같은 것을 보여 주었고 나는 그것에 대해 살 수 없었기 때문에 여기에서 요청했습니다. 그래도 대답 해 주셔서 감사합니다.
Abhic

2
내가 이해하지 못하는 것은 왜 애플이 전체 시스템을 노출시키는 것을 두려워하는 것보다 사진 / 비디오 폴더가 노출되도록 허용하지 않았다는 것입니다.
fasih.rana 2011 년

1
iOS에서 이미지 업로드를 수행하는 방법을 참조하기 위해 iOS Safari 문서에 대한 링크가 있습니까 ?? 감사!
detj

아! 자동으로 수행됩니다. 번거 로움 없음 :)
detj

HTML 5를 사용하여 iOS Safari 브라우저에서 파일 업로드를위한 코드를 게시 해 주시겠습니까?
Karthick 2013

28

이 문제에 접근하는 또 다른 방법은 사용자에게 자동 업로드를 위해 사진을 이메일로 보낼 수있는 개인 이메일 주소를 제공하는 것입니다 (예 : photos+abc123@yoursite.com).

설정하는 데 약간의 작업이 더 필요하지만 모든 장치의 사용자에게 일관된 경험을 제공합니다 (모바일이 아닌 사용자도 편리하다고 느낄 수 있음).


어떻게 할 수 있는지 궁금합니다. 사용자가 첨부 파일, 사진 또는 동영상을 첨부 한 이메일을 보내고, 해당 정보를 추출하여 DB에 저장하고 적절한 위치에 관련 정보를 게시하고, 사진을 이미지 폴더에 게시하고, 비디오에 대한 비디오는 그렇게 ... 또는 무언가 비슷한 .. 수 이미 스크립트를이 있어야한다 ... 폴더
탱커

@Tanker 예, 앱은 주기적으로 이메일을 검색하고 첨부 파일을 가져와 변경 사항을 저장해야합니다. 나는 과거에 이것을 위해 ChilKat 이메일 라이브러리를 사용 했지만 32/64 비트 사이에서 항상 멋지게 컴파일되지는 않는다고 경고 할 것입니다.
brichins 2014

9

http://picupapp.com 의 picup 솔루션을 좋아합니다 .


거기에 그에 대한 튜토리얼 . Picup의 한 가지 문제는 이미지를 타사 서버 (imgur.com)에 업로드하여 많은 라이선스 / 개인 정보 문제를 일으킬 수 있다는 것입니다. Imgur의 서비스 약관은 기본적으로 이미지를 소유하고 있으며 상업적 목적으로 사용할 수 없다고 말합니다.
Ian Dunn

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>

당신이 한계를 알고 있기 때문에 당신이 더 받아 들일 수 있습니다. 이와 같은 앱에 응답하는 비 개발자의 반응을보고 싶습니다. 그것은 흥미로운 방법이며 사용자가 이미 익숙한 다른 방법에 의존하는 방법입니다. 내가하려는 작업에도 효과가있을 수 있습니다.
Angelo R.

네. 그것은 깔끔한 아이디어입니다. 첨부 파일을 구문 분석하는 스크립트가 있어야합니다. Zend Framework에는이를위한 몇 가지 멋진 구성 요소가 있습니다.
Svetoslav Marinov

6

iOS 6 이상에서 safari를 사용하여 사진을 업로드 할 수 있습니다. 위의 해결 방법은 iOS 5 이하에서는 여전히 필요합니다.


2
iOS 6에서 수행하는 방법에 대한 지침이 있습니까?
Wim Deblauwe 2010 년


2

iOS 6.0의 Safari 는 다음 <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+ 는 위의 코드를 지원하는 첫 번째 버전 입니다.

면책 조항 : 내가 CTO 인 비디오 녹화를 처리 하는 Pipe 이미지 제공


1

내가 방금 생각한 아이디어는 사용자가 URL을 붙여 넣을 수있는 텍스트 상자를 사용하여 사용자가 보관 용 또는 유사한 앱을 사용하고 보관 용 파일의 공개 URL을 복사 할 수 있도록하는 것입니다. 그러면 서버는 보관 용 서버에서 다운로드 할 수 있습니다.

picupapp이 작동하지 않는 것처럼 들리도록 이미지 이외의 파일 형식을 지원해야합니다.


0

아직 iOS5를 사용 중이라면 iCab Mobile을 사용해보십시오 . 내 ipad 및 (적어도 나를 위해) 파일 업로드가 제대로 작동합니다.

감사합니다, Piotr


0

iOS 6 이상인 경우에만

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

"캡처"는 iOS에서 아무것도 변경하지 않지만 다른 장치에는 여전히 유용합니다 (명백하게는 Android, 주석 참조).


capture="camera"(문자열)은 capture="capture"W3C 후보 권장 사항에서 로 대체되었습니다 . 두 경우 모두 Android에서만 작동합니다.
Octavian Naicu 2016

@OctavianNaicu는 의미가 있습니다. 응답을 편집했습니다. 정보 주셔서 감사합니다
Erdal은 G.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.