imgur를 활용한 이미지 업로드 구현

IMGUR API를 사용해서 얻는 이점

서버내 이미지 저장을 할 필요가 없기 때문에 서버하드용량을 아낄 수 있습니다.

예를들어 프로그래머분들이 개인블로그사이트 운영등을 할때에 하드용량이 적은 값싼 호스팅으로도 사이트운영이 가능해집니다.

(보통 이미지 파일들이 하드용량을 잡아먹지 소스가 용량을 잡아먹진 않기 때문에..)

1. IMGUR에 접속해서 가입 후 어플리케이션 신청 후 Client ID를 발급받는다. 

https://imgur.com/register 로 접속하셔서 일단 아래와 같이 가입을 완료 후

https://api.imgur.com/oauth2/addclient 로 들어가서 사진과 같이 대강 작성 후 submit버튼을 눌러서 완료하면

Client ID 와 Client Secret을 주는데 여기서 클라이언트아이디가 실제 API사용시 필요하게되는 정보입니다.

2. 이제 자바스크립트로 업로드를 구현해봅시다.

쓰기 쉬운 형태의 함수로 잘 만들어두었습니다^^

아래 소스로 먼저 테스트해보시고 개인에 맞게 수정해서 사용하시면 됩니다.

※ 제이쿼리를 사용했으므로 기본적으로 제이쿼리를 사용할 수 있는 환경에서만 동작합니다. 

※ 무단으로 복사 및 퍼가는 행위를 일체 금지합니다. 

<input name="img" type="file"/>

<script type="text/javascript">

/*

IMGUR 파일 업로드 함수

@param file : 파일데이터

@param callback : 콜백함수

*/

function uploadImageByImgur(file, callback) {           
    form = new FormData();
    form.append('image', file);
    $.ajax({                   
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(evt){// 업로드상태이벤트리스너등록
                if (evt.lengthComputable) {              
                    console.log("업로드진행률:"+parseInt( (evt.loaded / evt.total * 100), 10)+"%");
                }
            }, false);
            return xhr;
        },                     
        url: 'https://api.imgur.com/3/image',// 업로드요청주소             
        headers: { Authorization: 'Client-ID 발급받은클라이언트아이디' },               
        type: 'POST',               
        data: form,               
        cache: false,                   
        contentType: false,                    
        processData: false                   
    }).always(callback);
}

/*

파일 변경 이벤트가 감지되면 자동으로 이미지 업로드

*/

$(document).ready(function(){ // document가 모두 로드되면 실행됨

$("input[name=img]").change(function(){// 사용자가 파일을 변경했을때 발생됨

var file = this.files[0];

uploadImageByImgur(file, function(result){

console.log(result);

console.log('업로드결과:'+result.status);

if(result.status!=200){

result = $.parseJSON(result.responseText);

}

if(result.data.error){

console.log('지원하지않는 파일형식..');

}else{

console.log('업로드된 파일경로:'+result.data.link);

}

});

});

});

</script>