아이폰,아이패드 무료 앱을 이용해 모바일 사파리에서 파일업로드 구현하기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

IOS6부터는 가능해졌습니다~~~

아이폰, 아이패드는 <input type="file" /> 태그가 작동되지 않습니다.(안드로이드는 가능한데..;)

그래서 모바일 웹 페이지를 만들때 제일 큰 난관중 하나일것이라 생각됩니다.

약 일주일정도의 웹서핑 결과 외국에서 무료로 사파리 플러그인 형태로 앱을 찾았습니다.
변수전달, 파일 선택과 카메라촬영후 바로 전송까지 지원됩니다.(기부라도 해야겠습니다.ㅎ)

약간의 발견된 문제는 파일업로드되면서 문제 발생시 그냥 창이 닫힌다는거. 에러 내용등을 출력 안해주네요.
또 공식지원은 iOS3.1.2이상인데, 무슨 문제인지 구 버전에서 몇몇 기기는 계속 새창만 뜹니다. (KT 정발 아이폰3Gs입니다.)
혹시 원인이나 해결책 발견했다면 알려주세요~

정보입니다.
앱명 : Picup
링크 : http://picupapp.com/
iTunes : http://itunes.apple.com/us/app/picup/id354101378?mt=8
링크에서 필요한 js 파일을 다운 받으세요.

데모페이지입니다.
우선 iTunes에서 설치후 접속하세요~
아이폰이나, 아이패드에서만 접속하세요 : http://whatdo.net/picup/

실행 이미지입니다.
아이패드에서 캡쳐해서 큼직하네요.ㅋ

모바일에서 접속하면 첫페이지입니다

아이폰일경우 카메라 촬영후 전송이 있습니다.그리고 파일 선택도 같이..

파일선택화면

선택후 리턴되는 값들입니다.

여러개 선택후 덧붙인거죠.

글 내용은 적습니다.

전송후 파일 목록과 글 내용

실제 전송된 ftp 파일 목록

실행예제 소스입니다.전 jquery랑 같이 사용했습니다.
위의 홈페이지에서 picup.js 파일을 다운받으세요~
(단순예제이니 날코딩으로..ㅋ)

index.html

<html>
<head>
<meta charset="utf-8" />
<title>테스트</title>
<link rel="apple-touch-icon" href="iphone72.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="picup.js"></script>
<script type="text/javascript">
    function su(){
        if($("#file_list").val() == ""){
            alert('파일 선택...');
            return false;
        }
        if($("#contents").val() == ""){
            alert('내용 입력...');
            $("#contents").focus();
            return false;
        }
        document.f.submit();
    }
</script>
</head>
<body>

<form name="f" action="upload.php" method="post" enctype="multipart/form-data" id="formID">
<input type="hidden" name="file_list" id="file_list" />
<br /><br />
<input type="file" name="filedata" id="file_id" style="font-size:1.5em;"/>
<br /><br />
<textarea name="contents" id="contents" style="width:100%;height:100px;border:3px solid #ddd" placeholder="내용입력"></textarea>
<br /><br />
<button type="button" style="font-size:1.5em;" onclick="su();">      전송 (Submit)     </button>
</form>

<h3>
<fieldset>
    <legend>방법</legend>
<ol>
    <li><a href="http://itunes.apple.com/us/app/picup/id354101378?mt=8" target="_blank">Picup 플러그인 설치(iTunes)</a></li>
    <li>사진선택</li>
    <li>내용 입력후 전송 터치</li>
    <li>전송후 리턴되는 것 확인...</li>
</ol>
</fieldset>
</h3>

<div id="imgList"></div>
<div id="result"></div>

<script type="text/javascript">

var currentParams = {
        'callbackURL'         : escape('절대경로/picup/'),
        'referrerName'         : escape('test'),
        'referrerFavicon'     : escape('iphone72.png'),
        'purpose'           : escape('upload image file'),
        'debug'             : 'true',
        'returnServerResponse' : 'true',
        //'imageFormat' : 'jpg',
        'postImageParam' : 'filedata',
        'postURL' : escape('절대경로/upload.php'),
        'returnThumbnailDataURL' : 'true',
        'postValues' : escape('mode=input&contents2='+encodeURIComponent('안녕'))//이미지는 다른 변수랑 같이 전달.
    };

window.onload=function(){

    Picup.convertFileInput(document.getElementById('file_id'), currentParams);//버튼 생성

    Picup.callbackHandler = function(data){
        for(var key in data)
            $("#result").append(key + ":" +decodeURIComponent(unescape(data[key]))+"<br /><br />");

        $("#file_list").val($("#file_list").val() + unescape(data['serverResponse']) + "|");
        $("#imgList").append("<img src='"+unescape(data['thumbnailDataURL'])+"' /> ");

    }
}
</script>
</body>
</html>

파란글씨가 세팅 변수인데, 굵은색글씨가 중요한것입니다.
filedata 가 upload.php로 가는 파일변수입니다. 그다음은 일반 서버스크립트와 같이 처리하면됩니다.
아무래도 플러그인이니 절대경로(http://포함 전부)를 적어야 할듯합니다. 뭐 궁금하면 테스트후 알려주세여~

저작자표시 비영리 변경금지

'Mobile & Mac? > util & app' 카테고리의 다른 글

넥서스원 웹서핑시 유용한 기능 하나 (4)	2010.10.15
[안드로이드 어플]산책, 걷기 운동시 유용한 'AboveRoad' (0)	2010.09.18
안드로이드 무료 게임 - 포트리스3, Robo Defence... (3)	2010.09.11
안드로이드 무료어플 - 파일탐색기 & PC원격접속 어플 (1)	2010.08.31

여유 or 방관

아이폰,아이패드 무료 앱을 이용해 모바일 사파리에서 파일업로드 구현하기

'Mobile & Mac? > util & app' 카테고리의 다른 글

티스토리툴바

아이폰,아이패드 무료 앱을 이용해 모바일 사파리에서 파일업로드 구현하기

'Mobile & Mac? > util & app' 카테고리의 다른 글

'Mobile & Mac?/util & app' Related Articles

티스토리툴바