Cordova 사진 업로드 구현하기

필요한 플러그인 설치하기

카메라, 갤러리로부터 사진을 가져오기 위해서는 Camera 플러그인을 설치해야 하고, 파일의 업로드를 위해서는 FileTransfer 플러그인을 설치해야 합니다.

Camera 플러그인 설치하기

 

FileTransfer 플러그인 설치하기

플러그인의 설치 결과는 아래와 같습니다. 여기서는 FileUpload라는 새로운 프로젝트를 생성하여 진행했습니다.

 

 

 

HTML 기본 구조 구성하기

다음과 같이 HTML의 기본 구조를 구성하였습니다.

 

실행 결과는 아래 화면과 같습니다. Camera, Library 버튼을 클릭하면 각각 카메라와 갤러리가 호출됩니다. 사진의 선택이 완료된 후 Upload 버튼을 누르면 파일이 전송되도록 구현하겠습니다.

 

 

 

카메라와 갤러리로부터 사진 가져오기

카메라, 갤러리를 호출 함수

navigator.camera.getPicture(onSuccess, onFail, option)
onSuccess는 처리에 성공한 경우 호출될 콜백함수 입니다. 파라미터로는 사용자가 선택하거나 촬영한 이미지에 대한 경로가 전달됩니다. onFail은 처리에 실패한 경우 호출될 콜백함수 입니다. 에러 메시지를 의미하는 문자열(영문)이 파라미터로 전달됩니다. option은 사진을 가져오는데 필요한 JSON 형식의 옵션입니다. 이 옵션의 sourceType값을 어떻게 설정하는지에 따라서 카메라를 호출할지 갤러리를 호출할지가 결정됩니다.  

버튼 클릭 이벤트를 통한 구현

카메라나 갤러리를 호출하기 위한 takePicture() 라는 함수를 정의해 두고 각각의 버튼이 클릭되었을 때 이 함수에게sourceType 설정에 사용할 파라미터를 다르게 전달하여 구현하였습니다.

 

결과확인

아이폰 시뮬레이터의 경우는 갤러리에서 사진을 가져오는 것은 가능하지만 카메라를 호출할 수는 없습니다.

안드로이드 에뮬레이터의 경우 카메라를 통해 아래와 같은 가상의 이미지를 촬영할 수 있습니다. 안드로이드 에뮬레이터로 사진을 촬영하면 아래와 같이 이미지 파일의 이름 뒷부분에 숫자값이 표시되는 것을 볼 수 있습니다.

 

 

파일 업로드 구현하기 업로드에 대한 클릭 이벤트 정의하고 다음과 같이 구현합니다. 파일 업로드는 HTML의 multipart 전송을 구현한 것과 동일하게 동작하기 때문에 업로드를 받는 백엔드 페이지는 HTML에서의 전송과 동일하게 구현합니다. 여기서는 파일 업로드를 받기 위한 백엔드 페이지를 다음의 URL로 정의해 두었습니다.

http://itpaper.co.kr/demo/app/upload.php

이 백엔드 페이지는 다음과 같이 파일이 전송된다고 가정한 페이지 입니다.

<input type=”file” name=”photo” />

 

업로드 된 결과는 JSON으로 표시하도록 되어 있습니다. 아래의 소스코드 9라인에서 사용되는 file_path라는 변수는 미리 선언해 둔 전역변수 입니다. 카메라나 갤러리를 호출한 경우 이 전역변수에 사진의 경로를 미리 저장해 둡니다.

 

 

결과 확인하기

 

 

업로드 된 파일을 확인하기 위해서는 다음의 페이지를 방문하시기 바랍니다. 업로드 된 파일을 파일이름순으로 표시하도록 구현되어 있습니다.

 

이 예제에 사용된 index.html의 전체 완성 소스는 다음과 같습니다.

3 thoughts on “Cordova 사진 업로드 구현하기

  1. 장준혁

    질문이 있습니다. 찍은 사진들이나 가지고 있는 라이브러리를 포스트로 올리는 방법 말고 로컬에 올리고 싶은데

    다른 방법 없을까요…? 코르도바 입문한지 얼마 안되어서 여쭤봅니다…

    • 글쓴이

      업로드받은 파일을 수신하기 위한 백엔드 페이지(PHP,JSP,Node등)를 하나 작성하신 후에 로컬PC에서 웹 서버를 통해 구동시키시면 됩니다.
      웹 서버가 구동중인 PC와 핸드폰이 같은 공유기에 접속되어 있는 상태라면 Cordova에서 로컬PC의 IP주소를 통해 업로드 가능합니다.
      Cordova 이전에 PHP와 같은 웹 프로그래밍 언어를 하나 살펴보신다면 그리 어렵지 않은 부분임을 아실 수 있으실 겁니다.

  2. 박정락

    선생님 안녕하세요~ ^^

    질문이 있어서 글 남깁니다

    cordova 이용해서 2개 이상 멀티 이미지를 선택해서 업로드하는 방법은 없는지 궁금합니다.

    답변 부탁드립니다

    고맙습니다~

댓글 남기기