Skip to main content

· 6 min read

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

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

이 부분은 load-image 모듈을 사용하면 다 해결된다. 아니라면.. 사진 값을 바이너리로 읽어 처리해야한다.

설치

# bower install https://github.com/blueimp/JavaScript-Load-Image.git --save
$ yarn add blueimp-load-image

소스

<script type="text/javascript">
var imageModule = (function () {
"use strict";
var possible = window.File && window.FileReader && window.FormData; // html5 업로드를 지원하는지의 여부
var apiPath = "/api/test.php"; // 업로드 서버 처리 경로
var folder = "/upload/review/"; // 기본 이미지 업로드 폴더
var $input;
var maxWidth = 600;
var maxHeight = 480;
var imageArray = []; // callback에 사용할 이미지 파일명 배열
var callback;
/**
* [sendImageFile 이미지 비동기 업로드]
* @scope {[private]}
* @param {[string]} imageData [이미지 binary]
* @return {[function]} callback [업로드 후처리]
*/
function sendImageFile(imageData) {
if (imageData) {
var formData = new FormData();
formData.append("type", "upload");
formData.append("folder", folder);
formData.append("imageData", imageData);
$.ajax({
type: "post",
url: apiPath,
data: formData,
dataType: "json",
contentType: false, // contentType header 제거
processData: false, // Dom 객체를 전송하려면 false 처리해야함
})
.then(function (data) {
if (data.data) {
imageArray.push(data.data.file); // 이미지 배열에 저장
$input.val("");
if (callback) {
callback(imageArray);
} else {
console.log("callback function not initialized");
}
}
})
.catch(function (error) {
console.log("upload fail: ", error);
});
} else {
console.log("image data is null");
}
}
return {
/**
* [init 이미지 모듈 초기화]
* @param {[string]} fileId [변경할 input id]
* @param {[function]} callbackFunc [후처리]
* @param {[object]} settings [width, height, folder 설정가능]
*/
init: function (fileId, callbackFunc, settings) {
if (possible) {
if (typeof settings === "object") {
if (settings.width) {
maxWidth = settings.width;
}
if (settings.height) {
maxHeight = settings.height;
}
if (settings.folder) {
folder = settings.folder;
}
}
if ($.isFunction(callbackFunc)) {
callback = callbackFunc;
} else {
console.log("callback is not defined");
}
var options = {
maxWidth: maxWidth, // resize width 값
maxHeight: maxHeight, // resize height 값
canvas: true, // 사진을 돌리려면 canvas 객체로 받아야함
downsamplingRatio: 0.5, // 비율에 맞추어 크기 감소
};
$input = $("#" + fileId);
$input.on("change", function (e) {
e.preventDefault();
e = e.originalEvent;
var target = e.dataTransfer || e.target;
var file = target && target.files && target.files[0];
loadImage.parseMetaData(file, function (data) {
// exif js를 사용해 이미지의 tag를 가져옴
if (data.exif) {
options.orientation = data.exif.get("Orientation"); // 화면이 돌아간 비율을 지정
} else {
if (options.orientation) {
options.orientation = null;
}
}
// 캔버스 이미지 리사이징 처리 후 서버호출
loadImage(
file,
function (img) {
sendImageFile(img.toDataURL());
},
options
);
});
});
} else {
console.log("file upload is not supported");
}
},
/**
* [getFolder 업로드 경로 호출]
* @return {[string]} [경로]
*/
getFolder: function () {
return folder;
},
/**
* [delete 이미지 삭제]
* @param {[number]} idx [이미지 배열의 인덱스]
* @param {[function]} callbackFunc [delete 후처리]
*/
delete: function (idx, callbackFunc) {
if (imageArray[idx]) {
$.ajax({
url: apiPath,
type: "post",
data: {
type: "delete",
folder: folder,
filename: imageArray[idx],
},
dataType: "json",
})
.then(function (data) {
console.log("file delete success");
console.log(data);
if ($.isFunction(callbackFunc)) {
callbackFunc(data);
}
})
.catch(function (error) {
console.log("server file delete failed");
console.log(error);
})
.done(function () {
imageArray.splice(idx, 1);
$input.val("");
if (callback) {
callback(imageArray);
} else {
console.log("callback function not initialized");
}
});
} else {
console.log("delete index not defined");
}
},
clear: function () {
console.log("clear array");
imageArray = [];
},
};
})();
$(function () {
imageModule.init(
"fileInput",
function (data) {
var folder = imageModule.getFolder();
var str = "";
for (var i = 0, len = data.length; i < len; i++) {
str +=
'<img src="' +
folder +
data[i] +
'" style="width:100%;height:100%;">';
}
$("#area").html(str);
$("#fileData").val(JSON.stringify(data));
},
{}
);
// options, width height folder..
// {width:500, height:300, folder:'/upload/board/'}
});
// after insert into database
$("#area").empty();
$("#fileData").val("");
imageModule.clear();
</script>

<input type="file" name="imageFile" id="fileInput" />

설명

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

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

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

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

· 2 min read

개발을 하다보면 datetime 이 같이 필요한 경우가 생긴다. pickadate 를 사용해 date 와 time picker 를 모두 사용해 만들 수도 있지만 datetimepicker가 편하고 쉽다.

설치

# datetimepicker
$ bower install https://github.com/xdan/datetimepicker.git --save
# moment
$ bower install moment --save

예제

<link
rel="stylesheet"
type="text/css"
href="/bower_components/datetimepicker/build/jquery.datetimepicker.min.css"
/>
<!-- php.date.formatter.js 와 jquery.mousewheeel.js 를 포함하는 full.js-->
<!-- moment는 이미 선언되어있다고 가정합니다 -->
<script src="/bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

<script>
// dateTimePicker localization
$.datetimepicker.setLocale("ko");
// dateTimePicker moment.js와 연동
$.datetimepicker.setDateFormatter({
parseDate: function (date, format) {
var d = moment(date, format);
return d.isValid() ? d.toDate() : false;
},

formatDate: function (date, format) {
return moment(date).format(format);
},
});

$(function () {
// datetimepicker init
$(".datetimepicker").datetimepicker({
format: "YYYY-MM-DD HH:mm:ss",
formatTime: "HH:mm",
formatDate: "YYYY-MM-DD",
});
});
</script>

<input type="text" name="startDate" class="datetimepicker" /> ~
<input type="text" name="endDate" class="datetimepicker" />

여담

pickadate 에서 datetime 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?

· 2 min read

텍스트 복사는 zeroclipboard 를 사용하라고 많이 나오는데, flash 를 이용해 복사하는 방법이다. 더 쉽고 간편하게 ClipboardJS 라이브러리를 사용해보자

설치

# npm
$ npm install clipboard --save

$ yarn add clipboard

소스

<script src="/bower_components/clipboard/dist/clipboard.min.js"></script>

<!-- 1. URL copy -->
<a href="#" id="btnCopyUrl" data-clipboard-action="copy">url 복사</a>
<script>
$(function ({
// 복사 버튼을 만들시 data-clipboard-text 안에 복사할 문구를 넣어준다
$('#btnCopyUrl').attr('data-clipboard-text', document.location.href);
// callback 설정
var clipboard = new Clipboard('#btnCopyUrl');
clipboard.on('success', function(e) {
alert('복사되었습니다');
});
clipboard.on('error', function(e) {
console.log(e);
});
});
</script>

<!-- 2. Text copy -->
<textarea id="textBody" cols="30" rows="5"></textarea>
<button
type="button"
id="btnCopyText"
data-clipboard-action="copy"
data-clipboard-target="#textBody"
>
텍스트복사
</button>

설명

html5 attribute 를 사용해 쉽게 제어가 가능하다.

신규 브라우저들은 다 지원하지만 (window.clipboard 객체가 있는 브라우저) iPhone 에선 clipboard 액세스가 모두 막혀있어서 복사를 할 수 없다.

· 2 min read

소스

/**
* [searchAddr 다음주소검색 API]
* @return {[JsonArray]} [주소데이터]
* <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"> 선행되어야함
*/
var searchAddr = function () {
new daum.Postcode({
oncomplete: function (data) {
var fullAddr = ""; // 최종 주소 변수
var extraAddr = ""; // 조합형 주소 변수
var engAddr = "";
var zipcode = "";

// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === "R") {
// 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;
zipcode = data.zonecode;
engAddr = data.roadAddressEnglish;

//법정동명이 있을 경우 추가한다.
if (data.bname !== "") {
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if (data.buildingName !== "") {
extraAddr +=
extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += extraAddr !== "" ? " (" + extraAddr + ")" : "";
} else {
// 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
zipcode = data.postcode;
engAddr = data.jibunAddressEnglish;
}

// 구버전일 경우 getElementById 로 변경
document.querySelector("#zip").value = zipcode;
document.querySelector("#address").value = fullAddr;
document.querySelector("#address_eng").value = engAddr;

document.querySelector("#address_detail").focus();
},
}).open();
};

설명

다음 주소검색 API 를 입맛에 맞게 조금 변경했다.