Skip to content

Instantly share code, notes, and snippets.

@gracefullight
Last active March 26, 2018 13:12
Show Gist options
  • Save gracefullight/18f101b376f9f7e06b9d04c1423f0f3a to your computer and use it in GitHub Desktop.
Save gracefullight/18f101b376f9f7e06b9d04c1423f0f3a to your computer and use it in GitHub Desktop.
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment