Picup APP 사용방법(아이폰)

작성자관리자 작성일2012/06/29 조회수6416
프린트하기 트위터로 전송하기 새창으로 이동 페이스북로 전송하기 새창으로 이동
아이폰 사파리에서 포토등록을 할 수 있게하는 PICUP APP 적용방법입니다.
write.php 라는 사진등록 양식으로 설명합니다.

write.php 구성
제목:
내용:
포토:
글쓰기 버튼

1. 아이폰 장비 인식 함수 등록
   사진등록하기는 안드로이드계열에서는 잘됨. 아이폰의 경우만 PICUP APP를 적용시켜랴합ㄴ다.
   
  function checkMobileSafari() {
    if( preg_match( '/(iPod|iPhone|iPad)/', $_SERVER[ 'HTTP_USER_AGENT' ] ) ) {
        return true;
    } else {
        return false;
    }
   }


2. write.php 에  picup app JS 파일을 삽입합니다.

 if( preg_match( '/(iPod|iPhone|iPad)/', $_SERVER[ 'HTTP_USER_AGENT' ] ) ) {
     <script src="./js/prototype.js"></script>
     <script src="./js/picup.js">script>
 }


3. write.php 사진등록 버튼에 id추가하고 포토선택 여부를 경고하는 input hidden 삽입합니다. 

<input id="filelist" type="hidden" name="filelist">
<input id="photo" type="text"  class="button blue" type="file" name="imgfile">
<div id="thumbnail_preview"></div>



4. write.php 문서하단에 스크립트 추가합니다.

  var currentParams = {};

    function displayResults(paramHash){
      var thumbnailData = paramHash.thumbnailDataURL;
      if(thumbnailData){
        $('thumbnail_preview').innerHTML = '<img ,src="'+unescape(thumbnailData)+'" alt="">';
      }
       var rtnmsg = unescape(paramHash.serverResponse).split("||");
       document.getElementById("filelist").value = rtnmsg[0];
        document.getElementById("tbname").value = rtnmsg[1];
     }


document.observe('dom:loaded', function(){
 

     $(document.body).addClassName('iphone');

      Picup.callbackHandler = displayResults;

   // We'll check the hash when the page loads in-case it was opened in a new page
   // due to memory constraints
     Picup.checkHash();     

   // Set some starter params
     currentParams = {
         'callbackURL'   : 'write.php',
         'referrername'   : escape('App Name'),
         'referrerfavicon'  : escape('favicon.ico'),
         'purpose'               : escape('Select your photo for the our App.'),
         'debug'   : 'false',
         'returnServerResponse' : 'true',
         'returnThumbnailDataURL': 'true',
         'thumbnailSize'         : '80',
         'postImageParam' : 'filedata',
          'postURL' : escape('upload.php'),
          'postValues' : escape('tbname=news&page=3 ')    };

         Picup.convertFileInput($('photo'), currentParams);

 });


5. upload.php 를 만듭니다.

              $pointdate   = date("YmdHis"); //저장할파일이름
              $savedir     = $photo_upload_dir."/"; //저장경로
              $file_name   = $_FILES['filedata']['name']; //파일이름
              $file_size   = $_FILES['filedata']['size'];//사이즈 
              $nameArr = explode(".", "$file_name");
              $upload_name01 = "I".$pointdate.".".$nameArr[1]; 
              $uploadfile =  $savedir.$upload_name01;

              move_uploaded_file($_FILES['filedata']['tmp_name'], $uploadfile); 
              
              echo $upload_name01."||".$tbname."||".$page ;


[비고]  1. favicon.ico 이 반드시 있어야 제대로 작동합니다.
          2. 사진등록 버튼을 클릭하면 picAPP 어플이 실행되고 사진을 선택하면 사진이 POSTURL에 적힌
              주소로 업로드됩니다. upload.php에서 파일을 업로드한후 echo 문으로 이미지명등 관련 변수를 
              callbackURL에 적힌 write.php로 반환합니다.
          3. write.php로 반환된 변수는  
             Picup.callbackHandler = displayResults; 함수를 통해 write.php에 적용됩니다.
            thumbnail_previewfilelist 값이 설정됩니다.
          4. filelist은 이미지명입니다. 제목과 내용등 기타 값을 입력한후 write.php를 전송해서 db에 입력하면
             됩니다.

[참고문서]
    1. http://www.ithinknext.com/response/board/board.php?tbname=tb89003
    2. http://www.parorrey.com/tag/picup-app/
    3. http://www.picupapp.com

             

IP : 222.108.104.165