development

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

big-blog 2020. 9. 3. 23:28
반응형

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


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

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


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

====

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

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

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


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

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


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


나는 이것에 대한 적절한 해결책을 찾았습니다. 사용자가 카메라 롤에서 이메일로 이미지를 복사하여 붙여 넣는 방법을 보여주는 사전 정의 된 지침이있는 페이지에 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>

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


또 다른 기본 iOS 애플리케이션 (Picup 또는 iphone-photo-picker와 유사)은 Aurigma Up 입니다.


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

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


iOS 6.0의 Safari 는 다음 <input type="file">을 허용하여 지원을 추가 한 최초의 제품입니다 .

  • 새 비디오 또는 사진 찍기
  • 라이브러리에서 비디오 또는 사진 선택

iOS10에서의 모습은 다음과 같습니다.

iOS 10 파일 입력 필터 없음

iOS9는 iCloud DriveDropbox를 포함한 기타 옵션을 도입했습니다 . iOS 6 ~ 8에는 처음 두 가지 옵션 만있었습니다.

다음 accept="image/*"속성 을 사용하여 파일 유형을 사진으로 제한 할 수 있습니다 .

<input type="file" accept="image/*" > 옵션을 사진으로 만 제한합니다.

사진 용 iOS 10 파일 입력

Android 측에서 Android 2.2+ 는 위의 코드를 지원하는 첫 번째 버전 입니다.

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


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

감사합니다, Piotr


iOS 6 이상인 경우에만

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

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

참고 URL : https://stackoverflow.com/questions/3891831/a-html5-web-app-for-mobile-safari-to-upload-images-from-the-photos-app

반응형