Graceful Light

비동기 이미지 업로드 - 리사이징 및 이미지 회전을 포함

2016-12-21


비동기 이미지 업로드 및 삭제
비동기 업로드를 이용하면 멀티 이미지 업로드나 모바일 이미지 업로드를 쉽게 처리할 수 있다.

모바일 이미지 업로드시에는 exif 속성에 따라 (카메라로 찍은 방향에 따라) 이미지가 회전되어서 올라가게 되고, 비율로 이미지를 표시해야 되기 때문에 리사이징이 필요하다.

이 부분은 load-image 모듈을 사용하면 다 해결된다.

설치

1
2
# load-image module
$ bower install https://github.com/blueimp/JavaScript-Load-Image.git --save

소스

설명

코드양이 되게 긴데, 5-6줄에서 업로드 서버 처리 경로 및 기본 업로드 폴더를 지정해준다.
9-10줄에서는 최대 가로 세로(px)을 지정해준다. 비율로 줄어들기 때문에 걱정하지말고 지정하자

사용법은 169줄 이후를 보면 된다.
callback 함수를 통해 올라간 이미지를 바로 보여주게 처리할 수 있다.
184줄부터는 db와의 통신이 끝난 후 화면을 초기화해주는 부분이다.

127줄의 imageModule.delete 함수를 사용해 업로드 된 사진을 삭제할 수 있다.

현재는 api/test.php로 서버의 업로드 처리 로직을 구현해놨는데,
type을 받아 delete일 경우 해당 이미지를 삭제,
아닐 경우 binary 데이터를 이미지로 변환해주게 로직을 짜면 된다.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요